zoukankan      html  css  js  c++  java
  • 25.EXTJS 主页面的jsp

    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                   '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 &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  
  • 相关阅读:
    野路子码农系列(7)近期花里胡哨技巧汇总
    野路子码农系列(6)有关线下验证集选取的思考
    野路子码农(5)Python中的装饰器,可能是最通俗的解说
    野路子码农(4)挖掘机云端部署小试
    野路子码农系列(3)plotly可视化的简单套路
    野路子码农系列(2)Python中的类,可能是最通俗的解说
    野路子码农系列(1) 创建Web API
    pandas技巧两则——列内元素统计和列内元素排序
    Windows环境下Anaconda安装TensorFlow的避坑指南
    让米帝领事馆给你报空气质量(动态网页爬取及简单的数据整理)
  • 原文地址:https://www.cnblogs.com/sharpest/p/7574259.html
Copyright © 2011-2022 走看看