基于Extjs的OPOA

基于ExtJs的opoa系统

OPOA是one page ,one application的简称，即单页系统，也就是说一个系统只有一个页面。就是要求所有其他的页面都以插件的形式在主页里显示，点击主页的一个菜单或链接按钮，调用一个模块的插件。插件在主页里以tab的形式显示。OPOA的好处在于大大提高了系统页面的加载效率，提高用户的体验度，是web系统开发的一个趋势。

下面介绍一下基于Extjs的OPOA系统的主页面。它是扩展Ext.viewport构成的。

代码如下：

 

1. Ext.ux.IndexPage = Ext.extend(Ext.Viewport, { 
2.     // welcomeUrl : "<iframe id='welcomeFrame' name='welcomeFrame' 
3.     // src='welcome.jsp' width='100%' height='100%' frameborder=0>", 
4.     layout : "border", 
5.     modelTree : new IRS.tree.modelTree(), 
6.     factorTree : new IRS.tree.factorTree(), 
7.     mainTab : new Ext.TabPanel({ 
8.                 plain : false, 
9.                 activeTab : 0, 
10.                 enableTabScroll : true, 
11.                 region : "center", 
12.                 items : [{ 
13.                             title : "欢迎", 
14.                             closable : false, 
15.                             html : "<img src='resources/iconp_w_picpaths/welcome.jpg'></img>" 
16.                         }] 
17.             }), 
18.     /** 
19.      * 主要初始化function 
20.      */ 
21.     initComponent : function() { 
22.         // north部分panel 
23.         this.topPanel = new IRS.panel.TopPanel({ 
24.                     userName : g_userName, 
25.                     parent : this 
26.                 }); 
27.         // 根节点菜单 
28.         this.rootMenu = new Ext.menu.Menu({ 
29.                     items : [{ 
30.                                 text : "添加应用", 
31.                                 handler : this.addApp, 
32.                                 iconCls : "xy-add", 
33.                                 scope : this 
34.                             }] 
35.                 }); 
36.          
37.  
38.         // 主界面布局 
39.  
40.         this.items = [{ 
41.                     region : "north", 
42.                     height : 113, 
43.                     layout : "fit", 
44.                     minSize : 70, 
45.                     border : false, 
46.                     items : this.topPanel 
47.                 }, { 
48.                     region : "west", 
49.                     title : "管理平台", 
50.                     layout : "accordion", 
51.                     split : true, 
52.                     width : 200, 
53.                     collapsible : true, 
54.                     items : [this.modelTree, this.factorTree] 
55.  
56.                 }, { 
57.                     region : "center", 
58.                     layout : "fit", 
59.                     split : true, 
60.                     items : [this.mainTab] 
61.                 }]; 
62.         Ext.ux.IndexPage.superclass.initComponent.call(this); 
63.  
64.         this.modelTree.on('click', this.treeClick, this); 
65.         this.modelTree.on('contextmenu', this.treeContextHandler, this); 
66.         this.factorTree.on('click', this.factorTreeClick, this); 
67.         this.factorTree.on('contextmenu', this.factortreeContextHandler, this); 
68.         this.on('rendered', this.initFn, this); 
69.  
70.         this.modelTree.on('click', this.treeClick, this);// 树的点击事件 
71.         this.modelTree.on('contextmenu', this.treeContextHandler, this);// 树的右键菜单 
72.         this.on('rendered', this.initFn, this);// 初始化 
73.  
74.         this.modelTree.root.reload(); 
75.         this.factorTree.root.reload(); 
76.     }, 
77.     /** 
78.      * 应用tree点击响应事件函数 
79.      * <p> 
80.      * type说明 1：应用 2: 大模型 3: 子模型 4：指标文件夹 5: 离散型指标 6: 连续性指标 7: 决策表 
81.      * </p> 
82.      *  
83.      * @param {} 
84.      *            node 
85.      */ 
86.     treeClick : function(node) { 
87.         if (node.attributes.type == 1) { 
88.             this.manageApp(node); 
89.         } else if (node.attributes.type == 2 || node.attributes.type == 3 
90.                 || node.attributes.type == 5 || node.attributes.type == 6 
91.                 || node.attributes.type == 7) { // model and dimension 
92.             this.addParam(node); 
93.         } 
94.     }, 
95.     /** 
96.      * 指标的树点击函数 
97.      *  
98.      * @param {} 
99.      *            node 
100.      */ 
101.     dimensionTreeClick : function(node) { 
102.         if (node.leaf) { 
103.             var dimensionId = "dimension_" + node.id; 
104.             var sheetId = "ext_sheet_" + dimensionId; 
105.  
106.             if (node.attributes.url == "DL") { 
107.                 var dingLiangPanel = new IRS.panel.DingLiangPanel({ 
108.                             width : 800, 
109.                             height : 500, 
110.                             type : IRS.commomValue.dimensionType.dingLiangDimensionType 
111.                         }); 
112.                 this.mainTab.add({ 
113.                             id : sheetId, 
114.                             title : node.text, 
115.                             closable : true, 
116.                             layout : "fit", 
117.                             items : dingLiangPanel 
118.                         }); 
119.             } else if (node.attributes.url == "DX" 
120.                     || node.attributes.url == "JC") { 
121.                 var dingXingPanel = new IRS.panel.DingXingPanel({ 
122.                             width : 800, 
123.                             height : 500, 
124.                             type : IRS.commomValue.dimensionType.dingXingDimensionType 
125.                         }); 
126.                 this.mainTab.add({ 
127.                             id : sheetId, 
128.                             title : node.text, 
129.                             closable : true, 
130.                             layout : "fit", 
131.                             items : dingXingPanel 
132.                         }); 
133.             } else if (node.attributes.url == "DL_NO_FORMULA") { 
134.                 var dingLiangNoFormulaPanel = new IRS.panel.DingLiangNoFormulaPanel( 
135.                         { 
136.                             width : 800, 
137.                             height : 500, 
138.                             type : IRS.commomValue.dimensionType.dingLiangDimensionTypeNoFormula 
139.                         }); 
140.                 this.mainTab.add({ 
141.                             id : sheetId, 
142.                             title : node.text, 
143.                             closable : true, 
144.                             layout : "fit", 
145.                             items : dingLiangNoFormulaPanel 
146.                         }); 
147.             } 
148.  
149.             var sheet = this.mainTab.getItem(sheetId); 
150.             this.mainTab.setActiveTab(sheet); 
151.         } 
152.     }, 
153.     /** 
154.      * 应用tree邮件菜单 
155.      *  
156.      * @param {} 
157.      *            node 
158.      * @param {} 
159.      *            event 
160.      */ 
161.     treeContextHandler : function(node, event) { 
162.         event.preventDefault(); 
163.         node.select(); 
164.         if (node.id == 0) { // root node menu 
165.             this.rootMenu.showAt(event.getXY()); 
166.             return; 
167.         } 
168.         switch (node.attributes.type) { 
169.             case 1 : 
170.                 this.appMenu.showAt(event.getXY()); 
171.                 break;// app menu 
172.             case 2 : 
173.                 this.bigModelMenu.showAt(event.getXY()); 
174.                 break;// big model menu 
175.             case 3 : 
176.                 this.sonModelMenu.showAt(event.getXY()); 
177.                 break;// son model menu 
178.             case 4 : 
179.                 this.sonDimensionTypeMenu.showAt(event.getXY()); 
180.                 break;// son model menu 
181.             case 5 : 
182.                 this.dimensionLSMenu.showAt(event.getXY()); 
183.                 break; 
184.             case 6 : 
185.             case 7 : 
186.                 this.dimensionLSMenu.showAt(event.getXY()); 
187.                 break;// dimension menu 
188.             default : 
189.                 break; 
190.         } 
191.  
192.     } 
193.      
194. }); 
195. Ext.reg("indexPage", Ext.ux.IndexPage); 
196.  
197. /** 
198.  * 主界面的入口 
199.  */ 
200. Ext.onReady(function() { 
201.             Ext.BLANK_IMAGE_URL = "resources/p_w_picpaths/s.gif"; 
202.             Ext.QuickTips.init(); 
203.             Ext.form.Field.prototype.msgTarget = "side"; 
204.             var viewport = new Ext.ux.IndexPage(); 
205.         }); 

使用方法：

var viewport = new Ext.ux.IndexPage();

在west部分是菜单树，菜单树点击事件会调用一个extjs写好的模块，这个模块就是一个Ext.Page，把这个page放在tab里面即可。这样，一个简单的opoa系统的显示界面就完成了。

转载于:https://blog.51cto.com/2747613/494274