1.

1 /** 2 * @author sux 3 * @time 2011-1-11 4 * @desc main page 5 */ 6 7 var mainPage = Ext.extend(Ext.Viewport,{ 8 9 10 /** 11 * 構造方法中進行整體布局 12 */ 13 constructor: function(username, date){ 14 //這個意思就是調用父類的構造函數 作用域是當前子類 傳入config參數 將來config中有什么屬性 會為子類構造出什么屬性 15 mainPage.superclass.constructor.call(this,{ 16 //方位布局 17 layout: 'border', 18 items: [{ 19 //我們需要在items中使用region參數來給它定位。 20 region: 'north', 21 xtype: 'panel', 22 //html: '人力資源管理系統', 23 bodyStyle: 'height: 66px;', 24 layout: 'absolute', 25 html: '<table class="header"><tr ><td class="header_left"></td><td class="header_center"></td>' + 26 '<td class="header_right"><div id="user_header">'+date+'&nbsp;<img src="img/user.png"/>&nbsp;' + 27 username+'&nbsp;&nbsp;<a href="user_exit.action">注銷</a>' + 28 '</div></td>' + 29 '</tr></table>' 30 },{ 31 region: 'west', 32 frame: 'true', 33 width: '200', 34 id: 'menu_tree', 35 xtype: 'panel', 36 autoScroll: true, 37 title: '人力資源管理系統', 38 split: true, 39 collapsible: true,//可折疊 40 items: [{ 41 xtype: 'treepanel', 42 title: '', 43 autoScroll: true, 44 border: false, 45 id: 'tree', 46 rootVisible:true,//不隱藏根節點 47 // tools: [{ 48 // id: 'refresh', 49 // handler: '', 50 // scope: this 51 // }], 52 //loader：樹節點的加載器，默認為Ext.tree.TreeLoader 53 loader: new Ext.tree.TreeLoader({ 54 dataUrl: 'menu.action'// dataUrl：獲取子節點的URL地址。 55 }), 56 //每加入進來的節點，若為非葉子節點則做為根節點繼續進行查找 57 // root：樹的根節點。 58 root: new Ext.tree.AsyncTreeNode({ 59 text: '人力資源管理', 60 expanded :true,// expanded：是否展開節點，默認為false 61 id: '1' //加載數據時每次以變量node傳入id的值如: node=1 62 //leaf: false //數據庫中存儲的為1/0 63 }), 64 listeners: { 65 'click': { 66 fn: this.clickNode, 67 scope: this 68 } 69 } 70 }] 71 },this.center,{ 72 region: 'south', 73 width: '100%', 74 frame: true, 75 height: 30, 76 html: "<div id='author'>Copyright &copy 201204 TRJ1101 & 張勇</div>" 77 }] 78 }); 79 }, 80 81 center: new Ext.TabPanel({ 82 id: 'mainTab', 83 frame: true, 84 region: 'center', 85 activeTab: 0,// 初始激活的tab，索引或者id值，默認為none,從0開始 86 autoScroll: false, 87 enableTabScroll : true, //溢出時滾動tab 88 split: true, 89 //TabCloseMenu一個顯示右鍵菜單的插件 90 //添加編輯插件 91 plugins: new Ext.ux.TabCloseMenu(), 92 93 items: [{ 94 closable: false,// tab是否可關閉，默認為false 95 title: '首頁', 96 iconCls: 'main',//css樣式 97 98 html: '<iframe src="/hrmsys/jsp/first.jsp" frameborder=0 width=100% height=100%/>' 99 }] 100 }), 101 102 /** 103 * 在中間區域添加新的面板 104 */ 105 addTab : function(nodeId, nodeUrl, nodeText, nodeIcon){ 106 var tabId = 'tab_'+nodeId; //tabId為新建面板的id 107 var tabTitle = nodeText; 108 var tabUrl = nodeUrl; 109 var centerPanel = Ext.getCmp('mainTab'); 110 var tab = centerPanel.getComponent(tabId); 111 if(parseInt(nodeId) == 28){ 112 Ext.getCmp('mainTab').remove(Ext.getCmp('tab_30')); 113 } 114 if(parseInt(nodeId) == 30){ 115 Ext.getCmp('mainTab').remove(Ext.getCmp('tab_28')); 116 } 117 //如果已存在此面板則只需要激活便可 118 if(!tab){ 119 var newTab = centerPanel.add(//ADD方法添加組建 120 new Ext.Panel({ 121 //bodyStyle: 'background-color:#dfe8f6;', 122 frame: true, 123 title: tabTitle, 124 iconCls: nodeIcon, 125 id: tabId, 126 closable: true 127 // listeners: {//監聽激活事件設置頁面大小 128 // active: this.activeTabSize, 129 // scope: this 130 // } 131 }) 132 ); 133 //激活新面板 134 centerPanel.setActiveTab(newTab); 135 //加載頁面數據 136 newTab.load({ 137 url: tabUrl, 138 method: 'post', 139 scope: this, 140 nocache : true, // 不緩存 141 timeout: 3000, 142 scripts : true //設置允許加載的頁面執行js,很重要 143 }); 144 }else{ 145 centerPanel.setActiveTab(tab); 146 }; 147 //this.juage(nodeId); 148 }, 149 150 /** 151 * 樹結點的單擊事件 152 * 若為葉子節點則彈出一個窗口 153 */ 154 clickNode : function(node, e){ 155 if(node.attributes.leaf){ 156 var nodeId = node.attributes.id; 157 var nodeUrl = node.attributes.menuUrl; 158 var nodeText = node.attributes.text; 159 var nodeIcon = node.attributes.menuIcon; 160 this.addTab(nodeId, nodeUrl, nodeText, nodeIcon); 161 }; 162 } 163 164 /** 165 * 激活頁面時設置頁面大小 166 */ 167 // activeTabSize : function(){ 168 // console.log('jin ru'); 169 // var w = Ext.getCmp('mainTab').getActiveTab().getInnerWidth(); 170 // var h = Ext.getCmp('mainTab').getActiveTab().getInnerHeight(); 171 // var activeTabId = Ext.getCmp('mainTab').getActiveTab().id; 172 // var activeTab = Ext.getCmp('activeTabId'); 173 // if(activeTab){ 174 // activeTab.setHeight(h); 175 // activeTab.setWidth(w); 176 // } 177 // } 178 }); 179

?

總結

以上是生活随笔為你收集整理的19.Extjs主页面显示js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。