Ext----动态创建TabPanel

 

Ext.onReady(function(){
	new Ext.Viewport({
	    renderTo:'content',
	    layout: 'border',
	    items: [
	        {
	        	xtype:'panel',
	        	id:'fPanel',
	        	title:'功能面板',
	            width: 300,
	            layout: 'border',
	            collapsible: true,
	            region: 'west',
	        	items:createTabPanel('menuTab')
	        }
	    ]
	});
	getSubPanel(0,Ext.getCmp('menuTab'));
}

function createTabPanel(pid){
	var tPanel = new Ext.TabPanel({
        id:pid,
        activeTab: 0,
        region: 'center',
        enableTabScroll: true,
        border:false,
        html:'<img src="images/blue-loading.gif"/>正在加载...'
	});
	return tPanel;
}

function getSubPanel(sumID,panel){
	// 通过DWR代理获取数据
	dwrProxy.initTabPanel(function(data){
		panel.body.dom.innerHTML = '';
		items = eval(data);// 将json字符串转换成js对象
		for(i = 0; i < items.length; i++){
			panel.add(items[i]);
		}
		panel.setActiveTab(0);
		panel.setHeight(document.body.clientHeight);
	});
}

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">

<dwr>
	<allow>
		<create creator="new" javascript="dwrProxy">
			<param name="class" value="com.linkage.app.web.TabPanelAction" />
		</create>
	</allow>
</dwr>

 

 

 

package com.linkage.app.web;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import com.linkage.app.util.StringUtil;
import com.linkage.cop.dao.DBConnection;

public class TabPanelAction {
	
	public String initTabPanel(){
		StringBuffer jsonArray = new StringBuffer();
		Connection conn = null;
		try {
			conn = DBConnection.getDBConnection();
			
			String json = getGridTabPanel(conn, "0");
			System.out.println(json);
			jsonArray.append(json);
		} catch (SQLException e) {
			e.printStackTrace();
		} finally{
			if (conn != null) {
				try {
					conn.close();
				} catch (SQLException e) {
					e.printStackTrace();
				}
			}
		}
		return jsonArray.toString();
	}
	
	/*
	* 创建TabPanel
	*/
	private String createTabPanel(ResultSet rs, String id) throws SQLException{
		StringBuffer tabPanel = new StringBuffer();
		boolean flag = true;
		tabPanel.append("{");
		String[] names = {"xtype","id","enableTabScroll","border","activeTab","region","items","listeners"};
		String[] values = {
			"'tabpanel'",
			getResultVal(id, flag),
			"true",
			"false",
			"0",
			"'center'",
			"{items}",
			"{"+getResultVal(rs, "listeners", !flag)+"}"
		};
		tabPanel.append(getJsonProperty(names, values));
		tabPanel.append("}");
		return tabPanel.toString();
	}

	/*
	* 创建Panel，作为父TablePanel的成员，用于存放子TabPanel
	*/
	private String createPanel(ResultSet rs, String sumID) throws SQLException{
		int i = 1;
		boolean flag = true;
		StringBuffer jsonObj = new StringBuffer();
		jsonObj.append("{");
		String[] names = {"xtype","id","title","items","layout"};
		String[] values = {
			"'panel'",
			getResultVal(rs, i++, flag),
			getResultVal(rs, i++, flag),
			createTabPanel(rs, sumID),
			"'border'"
		};
		jsonObj.append(getJsonProperty(names, values));
		jsonObj.append("},");
		return jsonObj.toString();
	}

	/*
	* 创建Panel，作为TablePanel的成员，用于显示页面
	*/
	private String createPanel(ResultSet rs) throws SQLException{
		int i = 1;
		boolean flag = true;
		StringBuffer jsonObj = new StringBuffer();
		jsonObj.append("{");
		String[] names = {"xtype","layout","id","title","html","listeners"};
		String[] values = {
			"'panel'",
			"'fit'",
			getResultVal(rs, i++, flag),
			getResultVal(rs, i++, flag),
			createIframe(getResultVal(rs, "panel_id", !flag), getResultVal(rs, i++, !flag)),
			"{"+getResultVal(rs, i++, !flag)+"}"
		};
		jsonObj.append(getJsonProperty(names, values));
		jsonObj.append("},");
		return jsonObj.toString();
	}
	
	/*
	* 创建iframe，在panel的html属性中用到
	*/
	private String createIframe(String id, String src) {
		String str = "";
		if (StringUtil.isNull(src)) {
			str = "'<img src=\"images/blue-loading.gif\"/>正在建设中。。。'";
		} else {
			str = "'<iframe id=\"frame"+id+"\" scrolling=\"auto\" height=\"95%\" width=\"100%\" noresize src=\"'+ctx+'"+src+"\"></iframe>'";
		}
		return str;
	}

	/*
	* 从数据库获取TabPanel的配置信息，然后将数据转换成json字符串
	*/
	private String getGridTabPanel(Connection conn, String sumID) throws SQLException{
		StringBuffer jsonArray = new StringBuffer();
		String sql = "select panel_id,panel_name,action_url,LISTENERS,(select decode(count(*), 0, 0, 1) from gis_panel_conf b where a.panel_id = b.sum_panel_id) isFolder from GIS_PANEL_CONF a where sum_panel_id = "+sumID+" and state='A' order by order_id";
		PreparedStatement stmt = conn.prepareStatement(sql);
		ResultSet rs = stmt.executeQuery();
		
		jsonArray.append("[");
		while (rs.next()) {
			StringBuffer jsonObj = new StringBuffer();
			boolean isFolder = rs.getBoolean("isFolder");
			if (isFolder) {
				String panel = createPanel(rs, rs.getString("panel_id")+sumID);
				String items = getGridTabPanel(conn, rs.getString("panel_id"));
				panel = panel.replace("{items}", items);
				jsonObj.append(panel);
			} else {
				jsonObj.append(createPanel(rs));
			}
			jsonArray.append(jsonObj);
		}
		if (jsonArray.length() > 1) {
			jsonArray.deleteCharAt(jsonArray.length()-1);
		}
		jsonArray.append("]");
		
		stmt.close();
		rs.close();
		return jsonArray.toString();
	}
	
	private String getResultVal(ResultSet rs, int columnIndex, boolean isChar) throws SQLException{
		String val = rs.getString(columnIndex);
		val = getResultVal(val, isChar);
		return val;
	}
	
	private String getResultVal(String val, boolean isChar) throws SQLException{
		if (StringUtil.isNull(val)) {
			val = "";
		} else {
			if (isChar) {
				val = "'"+val+"'";
			}
		}
		return val;
	}

	private String getResultVal(ResultSet rs, String columnName, boolean isChar) throws SQLException{
		String val = rs.getString(columnName);
		val = getResultVal(val, isChar);
		return val;
	}

	private String getJsonProperty(String[] names, String[] vals){
		StringBuffer prop = new StringBuffer();
		for (int i = 0; i < names.length; i++) {
			if (!StringUtil.isNull(vals[i])) {
				prop.append(names[i] + ":" + vals[i]);
				prop.append(",");
			}
		}
		String val = prop.toString();
		if (val.endsWith(",")) {
			val = val.substring(0, val.length() - 1);
		}
		return val;
	}
}

 

CREATE TABLE "GIS_PANEL_CONF" 
   (	"PANEL_ID" NUMBER(12,0) NOT NULL ENABLE, 
	"PANEL_NAME" VARCHAR2(50), 
	"SUM_PANEL_ID" NUMBER(12,0), 
	"ACTION_URL" VARCHAR2(100), 
	"STATE" VARCHAR2(100), 
	"COMMENTS" VARCHAR2(100), 
	"ORDER_ID" NUMBER(10,0), 
	"LISTENERS" VARCHAR2(200), 
	 CONSTRAINT "PK_PANEL_ID" PRIMARY KEY ("PANEL_ID")
 
   COMMENT ON COLUMN "GIS_PANEL_CONF"."PANEL_ID" IS '标签编码';
 
   COMMENT ON COLUMN "GIS_PANEL_CONF"."PANEL_NAME" IS '名称';
 
   COMMENT ON COLUMN "GIS_PANEL_CONF"."SUM_PANEL_ID" IS '上级标签编码';
 
   COMMENT ON COLUMN "GIS_PANEL_CONF"."ACTION_URL" IS '链接';
 
   COMMENT ON COLUMN "GIS_PANEL_CONF"."STATE" IS '状态（A：显示X：屏蔽）';
 
   COMMENT ON COLUMN "GIS_PANEL_CONF"."COMMENTS" IS '备注';
 
   COMMENT ON COLUMN "GIS_PANEL_CONF"."ORDER_ID" IS '排序用';
 
   COMMENT ON COLUMN "GIS_PANEL_CONF"."LISTENERS" IS '标签事件，如：deactivate:function(){alert(123);}，多个事件之间用逗号隔开';