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+' <img src="img/user.png"/> ' + 27 username+' <a href="user_exit.action">注销</a>' + 28 '</div></td>' + 29 '</tr></table>' 30 },{ 31 region: 'west', 32 frame: 'true', 33 '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 '100%', 74 frame: true, 75 height: 30, 76 html: "<div id='author'>Copyright © 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