提供一键恢复功能,点击恢复默认设置即可恢复到原有界面 保存到数据库设置需要建立表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 }); } })
相关推荐
Extjs portal Extjs portal Extjs portal Extjs portal Extjs portal Extjs portal Extjs portal Extjs portal Extjs portal Extjs portal Extjs portal
Extjs框架实现类似QQ的聊在功能.好友上线,下线提醒.留言,发表情,来消息提醒等功能
基于extjs框架实现的双日历功能
ExtJS实现Excel的导出功能(poi)
最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵
Extjs Portal 拖拽并保存 多个实例,直接运行。
Extjs Portal 托拽并保持cookie 手写cookie记录p-lit的位置。
EXTjs4类似qq消息提醒 欢迎下载
Extjs搜索过滤 类似百度、google搜索,asp.net版带数据库,更多请见我的资源Extjs3.1.1官方实例Asp.net版
完美的个性化定制代码,下载下来后放到extjs2.0环境里就可以运行
extjs实现动态树
ExtJS 表格的功能实现,包括单元格编辑,数据的获取。
extjs打印功能 可以实现选中列打印。
ExtJS 实现动态处理加载 grid 实现了CRUD还有分页功能
Extjs4--Form登录功能,结合struts2
SSH2 Extjs框架搭建及登录功能的实现
Extjs实现用户登录。。。。。。。。。。。。。。。。。
extjs实现报表
ExtJS实现Excel导出,最常用的可以解决大部分问题
NULL 博文链接:https://yiminghe.iteye.com/blog/338209