extjs portal实现类似门户定制的功能

提供一键恢复功能，点击恢复默认设置即可恢复到原有界面
保存到数据库设置需要建立表Portal  提供下面的字段
  private Long id;
   private String userId;//用户ID
   private Long portalColumn;
   private Long portalRow;
   private String portletId;//容器ID



js代码如下：
var jsonData;
Ext.onReady(function() {
	Ext.QuickTips.init();
	var fullPanel = new FullPanel();
	fullPanel.portal.init();
});

Ext.apply(window, {
	$ : Ext.get,
	$A : Ext.value,
	$C : Ext.getCmp,
	$D : Ext.getDom,
	$$ : Ext.select,
	$Q : Ext.query,
	$on : Ext.EventManager.on,
	$ready : Ext.onReady,
	$l : console.log,
	$cd : console.dir,
	$for : typeof forEach != 'undefined' ? forEach : Ext.each

});

FullPanel = Ext.extend(Ext.Panel, {

	portal : null, // portal

	constructor : function() {

		this.portal = new StartPortal();

		FullPanel.superclass.constructor.call(this, {
			renderTo : Ext.getBody(),
			id : 'fullPanel',
			height : Ext.getBody().getHeight(),
			width : Ext.getBody().getViewSize().width,
			autoScroll : false,
			layout : 'fit',
			bodyStyle : 'padding:0px 0px 0px 0px; overflow-x:hidden;',
			tbar : [ {
				xtype : 'label',
				id : 'onLineMsg',
				title : ''
			}, '->', '-', {
				text : '恢复默认',
				iconCls : 'resume',
				handler : this.onResumeClick,
				scope : this
			}, '-', {
				text : '保存我的设置',
				iconCls : 'save',
				handler : this.onSaveClick,
				scope : this
			}, '-' ]
		/*
		 * , listeners: { 'render': {fn : this.onRenderEvent, scope: this} }
		 */
		});
	},
	onRenderEvent : function(panel) {

	},
	onResumeClick : function() {
		try {
			this.portal.removeAllportlet();
			this.portal.restore();
		} catch (e) {

		}
	},
	onSaveClick : function() {
		var arr = [];
		if (!this.portal.items || this.portal.items.length == 0)
			return;
		for ( var i = 0; i < this.portal.items.length; i++) {
			var col = this.portal.items.items[i];
			for ( var j = 0; j < col.items.length; j++) {
				var portlet = col.items.items[j];
				var portletId = col.items.items[j].id;
				var rowNum = col.items.indexOf(portlet);
				var colNum = i;
				var str = portletId + ',' + colNum + ',' + rowNum;
				console.info(str);
				arr.push(str);
			}
		}
		// PortalManager.savePortal(arr, function(data) {
		// if(data) {
		//            	
		// } else {
		//            	
		// }
		// });
	}
});

StartPortal = Ext.extend(Ext.ux.Portal, {

	leftColumn : null,
	centerColumn : null,
	rightColumn : null,

	treePanel1 : null,
	treePanel2 : null,
	treePanel3 : null,
	treePanel4 : null,
	treePanel5 : null,
	treePanel6 : null,

	constructor : function() {

		StartPortal.superclass.constructor.call(this, {
			region : 'center',
			autoScroll : false,
			border : false
		});
	},
	restore : function() { // 恢复默认

		this.initAllComponent();

		this.leftColumn.add(this.createPortlet('alarmChartPanel', '告警统计',
				this.treePanel1));
		this.leftColumn.add(this.createPortlet('deviceChartPanel', '故障测试统计',
				this.treePanel2));

		this.centerColumn.add(this.createPortlet('onuChartPanel', '设备统计',
				this.treePanel3));
		this.centerColumn.add(this.createPortlet('testCountPanel', '厂商统计',
				this.treePanel4));

		this.rightColumn.add(this.createPortlet('factoryStaticPanel',
				'ONU运行状态统计', this.treePanel5));
		this.rightColumn.add(this.createPortlet('topNPanel', '最近TOPN流量统计',
				this.treePanel6));

		this.reDoLayout();
	},
	init : function() { // 初始化

		// if(!jsonData || jsonData.length == 0) {
		// this.restore();
		// return;
		// }
		this.initAllComponent();

		// for(var i=0, len=jsonData.length; i<len; i++) {
		// var id = jsonData[i].portletId;
		// var colNum = jsonData[i].portalColumn;
		// var rowNum = jsonData[i].portalRow;
		// var title, panel;
		// for(var props in this.portletObj) {
		// if(this.portletObj.hasOwnProperty(props)) {
		// var propValue = (this.portletObj)[props];
		// if(propValue['idx'] === id) {
		// title = propValue['title'];
		// panel = propValue['panel'];
		// break;
		// }
		// }
		// }
		// if(colNum == 0) {
		// this.leftColumn.add(this.createPortlet(id,title,panel));
		// } else if(colNum == 1) {
		// this.centerColumn.add(this.createPortlet(id,title,panel));
		// } else if(colNum == 2) {
		// this.rightColumn.add(this.createPortlet(id,title,panel));
		// }
		// }

		this.leftColumn.add(this.createPortlet('alarmChartPanel', '告警柱统计',
				this.treePanel1));
		this.leftColumn.add(this.createPortlet('deviceChartPanel', '设备统计',
				this.treePanel2));
		this.centerColumn.add(this.createPortlet('onuChartPanel', 'ONU运行状态统计',
				this.treePanel3));
		this.centerColumn.add(this.createPortlet('testCountPanel', '故障测试统计',
				this.treePanel4));
		this.rightColumn.add(this.createPortlet('factoryStaticPanel', '厂商统计',
				this.treePanel5));
		this.rightColumn.add(this.createPortlet('topNPanel', '最近TOPN流量统计',
				this.treePanel6));

		this.reDoLayout();
	},
	removeAllportlet : function() { // 移除所有的portlet
		if (this.items && this.items.length > 0) {
			for ( var i = 0; i < this.items.length; i++) {

				var c = this.items.itemAt(i);

				if (c.items) {
					for ( var j = c.items.length - 1; j >= 0; j--) {

						c.remove(c.items.itemAt(j), true);

					}
				}

			}
		}
	},
	initAllComponent : function() {

		var that = this;
		this.portletObj = {}; // 所有的portlet

		this.leftColumn = this.createColumn('left', .33);

		this.centerColumn = this.createColumn('center', .33);

		this.rightColumn = this.createColumn('right', .34);

		// 最近TOP10流量统计
		this.treePanel1 = new TreePanel1();
		this.treePanel2 = new TreePanel2();
		this.treePanel3 = new TreePanel3();
		this.treePanel4 = new TreePanel4();
		this.treePanel5 = new TreePanel5();
		this.treePanel6 = new TreePanel6();

		// this.portletObj.treePanel1 = {idx: 'alarmChartPanel', title: '告警柱统计',
		// panel:this.treePanel1};
		// this.portletObj.treePanel2= {idx: 'deviceChartPanel', title: '设备统计',
		// panel: this.treePanel2};
		// this.portletObj.treePanel3= {idx: 'onuChartPanel', title:
		// 'ONU运行状态统计', panel: this.treePanel3};
		// this.portletObj.treePanel4 =
		// {idx:'testCountPanel',title:'故障测试统计',panel:this.treePanel4};
		// this.portletObj.treePanel5 =
		// {idx:'factoryStaticPanel',title:'厂商统计',panel:this.treePanel5};
		// this.portletObj.treePanel6 =
		// {idx:'topNPanel',title:'最近TOPN流量统计',panel:this.treePanel6};
	},
	reDoLayout : function() { // 重新布局
		this.add(this.leftColumn);
		this.add(this.centerColumn);
		this.add(this.rightColumn);

		var fullPanel = Ext.getCmp('fullPanel');
		fullPanel.add(this);
		fullPanel.doLayout();
	},
	createPortlet : function(id, title, items) {
		return new Ext.ux.Portlet({
			id : id,
			title : title,
			tools : [ {
				id : 'close',
				handler : function(e, target, panel) {
					try {
						panel.ownerCt.remove(panel, true);
						// throw new Error("关闭窗口时出现了一个错误!");
					} catch (e) {

					}
				}
			} ],
			style : 'padding:0px 0 5px 0px',
			items : items
		});
	},
	createColumn : function(id, columnWidth) {
		return new Ext.ux.PortalColumn({
			id : id,
			columnWidth : columnWidth,
			style : 'padding:5px 0 5px 5px'
		});
	}
});

TreePanel1 = Ext.extend(Ext.tree.TreePanel, {
	constructor : function() {
		TreePanel1.superclass.constructor.call(this, {
			id : 'tree1',
			region : 'center',
			autoScroll : true,
			animate : true,
			width : '280',
			collapsible : (this.centerRegion == 'center' ? false : true),
			split : true,
			enableDD : true,
			containerScroll : true,
			border : false,
			loader : new Ext.tree.TreeLoader({
				url : '/neFunction/tes'

			}),
			root : new Ext.tree.AsyncTreeNode({
				id : "0",
				level : "0",
				text : "菜单树"
			}),
			rootVisible : true
		});
	}
})

TreePanel2 = Ext.extend(Ext.tree.TreePanel, {
	constructor : function() {
		TreePanel2.superclass.constructor.call(this, {
			id : 'tree2',
			region : 'center',
			autoScroll : true,
			animate : true,
			width : '280',
			collapsible : (this.centerRegion == 'center' ? false : true),
			split : true,
			enableDD : true,
			containerScroll : true,
			border : false,
			loader : new Ext.tree.TreeLoader({
				url : '/neFunction/tes'

			}),
			root : new Ext.tree.AsyncTreeNode({
				id : "0",
				level : "0",
				text : "菜单树"
			}),
			rootVisible : true
		});
	}
})

TreePanel3 = Ext.extend(Ext.tree.TreePanel, {
	constructor : function() {
		TreePanel3.superclass.constructor.call(this, {
			id : 'tree3',
			region : 'center',
			autoScroll : true,
			animate : true,
			width : '280',
			collapsible : (this.centerRegion == 'center' ? false : true),
			split : true,
			enableDD : true,
			containerScroll : true,
			border : false,
			loader : new Ext.tree.TreeLoader({
				url : '/neFunction/tes'

			}),
			root : new Ext.tree.AsyncTreeNode({
				id : "0",
				level : "0",
				text : "菜单树"
			}),
			rootVisible : true
		});
	}
})

TreePanel4 = Ext.extend(Ext.tree.TreePanel, {
	constructor : function() {
		TreePanel4.superclass.constructor.call(this, {
			id : 'tree4',
			region : 'center',
			autoScroll : true,
			animate : true,
			width : '280',
			collapsible : (this.centerRegion == 'center' ? false : true),
			split : true,
			enableDD : true,
			containerScroll : true,
			border : false,
			loader : new Ext.tree.TreeLoader({
				url : '/neFunction/tes'

			}),
			root : new Ext.tree.AsyncTreeNode({
				id : "0",
				level : "0",
				text : "菜单树"
			}),
			rootVisible : true
		});
	}
})

TreePanel5 = Ext.extend(Ext.tree.TreePanel, {
	constructor : function() {
		TreePanel5.superclass.constructor.call(this, {
			id : 'tree5',
			region : 'center',
			autoScroll : true,
			animate : true,
			width : '280',
			collapsible : (this.centerRegion == 'center' ? false : true),
			split : true,
			enableDD : true,
			containerScroll : true,
			border : false,
			loader : new Ext.tree.TreeLoader({
				url : '/neFunction/tes'

			}),
			root : new Ext.tree.AsyncTreeNode({
				id : "0",
				level : "0",
				text : "菜单树"
			}),
			rootVisible : true
		});
	}
})

TreePanel6 = Ext.extend(Ext.tree.TreePanel, {
	constructor : function() {
		TreePanel6.superclass.constructor.call(this, {
			id : 'tree6',
			region : 'center',
			autoScroll : true,
			animate : true,
			width : '280',
			collapsible : (this.centerRegion == 'center' ? false : true),
			split : true,
			enableDD : true,
			containerScroll : true,
			border : false,
			loader : new Ext.tree.TreeLoader({
				url : '/neFunction/tes'

			}),
			root : new Ext.tree.AsyncTreeNode({
				id : "0",
				level : "0",
				text : "菜单树"
			}),
			rootVisible : true
		});
	}
})