提供一键恢复功能,点击恢复默认设置即可恢复到原有界面 保存到数据库设置需要建立表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 }); } })