25.EXTJS 主页面的jsp

1.

 /**
  * @author sux
  * @time 2011-1-11
  * @desc main page
  */

  var mainPage = Ext.extend(Ext.Viewport,{

      /**
       * 构造方法中进行整体布局
       */
      constructor: function(username, date){
          //这个意思就是调用父类的构造函数 作用域是当前子类 传入config参数 将来config中有什么属性 会为子类构造出什么属性
          mainPage.superclass.constructor.call(this,{
              //方位布局
              layout: 'border',
              items: [{
                  //我们需要在items中使用region参数来给它定位。
                  region: 'north',
                  xtype: 'panel',
                  //html: '人力资源管理系统',
                  bodyStyle: 'height: 66px;',
                  layout: 'absolute',
                  html: '<table class="header"><tr ><td class="header_left"></td><td class="header_center"></td>' +
                          '<td class="header_right"><div id="user_header">'+date+'&nbsp;<img src="img/user.png"/>&nbsp;' +
                                username+'&nbsp;&nbsp;<a href="user_exit.action">注销</a>' +
                            '</div></td>' +
                        '</tr></table>'
              },{
                  region: 'west',
                  frame: 'true',
                  width: '200',
                  id: 'menu_tree',
                  xtype: 'panel',
                  autoScroll: true,
                  title: '人力资源管理系统',
                  split: true,
                  collapsible: true,//可折叠
                  items: [{
                      xtype: 'treepanel',
                      title: '',
                      autoScroll: true,
                      border: false,
                      id: 'tree',
                      rootVisible:true,//不隐藏根节点
 //                     tools: [{
 //                         id: 'refresh',
 //                         handler: '',
 //                         scope: this
 //                     }],
                      //loader：树节点的加载器，默认为Ext.tree.TreeLoader
                      loader: new Ext.tree.TreeLoader({
                          dataUrl: 'menu.action'// dataUrl：获取子节点的URL地址。
                      }),
                      //每加入进来的节点，若为非叶子节点则做为根节点继续进行查找
                      // root：树的根节点。
                      root: new Ext.tree.AsyncTreeNode({
                          text: '人力资源管理',
                          expanded :true,// expanded：是否展开节点，默认为false
                          id: '1' //加载数据时每次以变量node传入id的值如: node=1
                          //leaf: false //数据库中存储的为1/0
                      }),
                      listeners: {
                          'click': {
                              fn: this.clickNode,
                              scope: this
                          }
                      }
                  }]
              },this.center,{
                  region: 'south',
                  width: '100%',
                  frame: true,
                  height: 30,
                  html: "<div id='author'>Copyright &copy 201204 TRJ1101 & 张勇</div>"
              }]
          });
      },

      center: new Ext.TabPanel({
          id: 'mainTab',
          frame: true,
          region: 'center',
          activeTab: 0,// 初始激活的tab，索引或者id值，默认为none,从0开始
          autoScroll: false,
          enableTabScroll : true, //溢出时滚动tab
          split: true,
          //TabCloseMenu一个显示右键菜单的插件
          //添加编辑插件
          plugins: new Ext.ux.TabCloseMenu(),

          items: [{
              closable: false,// tab是否可关闭，默认为false
              title: '首页',
              iconCls: 'main',//css样式

              html: '<iframe src="/hrmsys/jsp/first.jsp" frameborder=0 width=100% height=100%/>'
          }]
      }),

      /**
       * 在中间区域添加新的面板
       */
       addTab : function(nodeId, nodeUrl, nodeText, nodeIcon){
           var tabId = 'tab_'+nodeId; //tabId为新建面板的id
           var tabTitle = nodeText;
           var tabUrl = nodeUrl;
           var centerPanel = Ext.getCmp('mainTab');
           var tab = centerPanel.getComponent(tabId);
           if(parseInt(nodeId) == 28){
               Ext.getCmp('mainTab').remove(Ext.getCmp('tab_30'));
           }
           if(parseInt(nodeId) == 30){
               Ext.getCmp('mainTab').remove(Ext.getCmp('tab_28'));
           }
           //如果已存在此面板则只需要激活便可
           if(!tab){
           var newTab = centerPanel.add(//ADD方法添加组建
               new Ext.Panel({
                   //bodyStyle: 'background-color:#dfe8f6;',
                   frame: true,
                   title: tabTitle,
                   iconCls: nodeIcon,
                   id: tabId,
                   closable: true
 //                  listeners: {//监听激活事件设置页面大小
 //                      active: this.activeTabSize,
 //                      scope: this
 //                  }
               })
           );
           //激活新面板
           centerPanel.setActiveTab(newTab);
           //加载页面数据
           newTab.load({
               url: tabUrl,
               method: 'post',
               scope: this,
               nocache : true, // 不缓存
               timeout: 3000,
               scripts : true //设置允许加载的页面执行js,很重要
           });
           }else{
               centerPanel.setActiveTab(tab);
           };
           //this.juage(nodeId);
       },

      /**
       * 树结点的单击事件
       * 若为叶子节点则弹出一个窗口
       */
       clickNode : function(node, e){
           if(node.attributes.leaf){
               var nodeId = node.attributes.id;
               var nodeUrl = node.attributes.menuUrl;
               var nodeText = node.attributes.text;
               var nodeIcon = node.attributes.menuIcon;
               this.addTab(nodeId, nodeUrl, nodeText, nodeIcon);
           };
       }

       /**
        * 激活页面时设置页面大小
        */
 //       activeTabSize : function(){
 //          console.log('jin ru');
 //               var w = Ext.getCmp('mainTab').getActiveTab().getInnerWidth();
 //               var h = Ext.getCmp('mainTab').getActiveTab().getInnerHeight();
 //               var activeTabId = Ext.getCmp('mainTab').getActiveTab().id;
 //               var activeTab = Ext.getCmp('activeTabId');
 //               if(activeTab){
 //                   activeTab.setHeight(h);
 //                   activeTab.setWidth(w);
 //               }
 //       }
  });