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);
//               }
//       }
 });