extjs 主页面

var mainPage = Ext.extend(Ext.Viewport,{
 
 
     /**
      * 构造方法中进行整体布局
      */
     constructor: function(username, date){
         mainPage.superclass.constructor.call(this,{
             layout: 'border',
             items: [{
                 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"><img src="img/out.gif"></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: new Ext.tree.TreeLoader({
                         dataUrl: 'menu.action'
                     }),
                     //每加入进来的节点，若为非叶子节点则做为根节点继续进行查找
                     root: new Ext.tree.AsyncTreeNode({
                         text: '综合管理',
                         expanded :true,
                         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'></div>"
             }]
         });
     },
     
     center: new Ext.TabPanel({
         id: 'mainTab',
         frame: true,
         region: 'center',
         activeTab: 0,
         autoScroll: false,
         enableTabScroll : true, //溢出时滚动tab
         split: true,
         //TabCloseMenu一个显示右键菜单的插件
         plugins: new Ext.ux.TabCloseMenu(),
         items: [{
             closable: false,
             title: '首页',
             iconCls: 'main',
             
             html: '<iframe src="/hrmsys/jsp/mainfra.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(
              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);
          };
          
      },
     
     /**
      * 树结点的单击事件
      * 若为叶子节点则弹出一个窗口
      */
      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);
//               }
//       }

 });

listeners: {
            "contextmenu": function(node, e){
                //列出右键菜单
                menu = new Ext.menu.Menu([{
                    xtype: "button",
                    text: "添加菜单",
                    iconCls: "icon-add",
                    pressed: true,
                    handler: function(tree){
//                        alert('a');
                        menu.hide(true);
                        onInsertNode();
                    }
                }, {
                    xtype: "button",
                    text: "添加子菜单",
                    iconCls: "li-addchildren",
                    pressed: true,
                    handler: function(){
                        menu.hide(true);
                        addChildren();
                    }
                }, {
                    xtype: "button",
                    text: "修改菜单",
                    iconCls: "icon-edit",
                    pressed: true,
                    handler: function(){
                        menu.hide(true);
                        onUpdate();
                    }
                }, {
                    xtype: "button",
                    text: "删除菜单",
                    iconCls: "icon-del",
                    pressed: true,
                    handler: function(tree){
                        menu.hide(true);
                        onDeleteNode();
                    }
                }]);
                //显示在当前位置
                menu.showAt(e.getPoint());
                 node.select();
            }
        }
    });
    rightMenuTree.expandAll();
    rightMenuTree.getRootNode().expand();
    
/********添加节点**********/
    addForm = new Ext.FormPanel({
                frame : true,
                // applyTo : 'rightUserFormDiv',
                bodyStyle : 'padding:5px 5px 0',
                autoWidth : true,
                defaults : {
                    labelWidth : 40,
                    labelAlign : 'right'
                    // width:200
                },
                waitMsgTarget : true,
                items : [{
                                fieldLabel : '菜单名称',
                                xtype : 'textfield',
                                width : 200,
                                name : 'rightMenu.name',
                                id:'add_rightMenuName',
                                allowBlank : false
                            },{
                                xtype:'hidden',
                                name:'rightMenu.rightMenu.id',
                                id:'addParentNodeId'
                            },{
                                xtype:'hidden',
                                name:'tid',
                                id:'tid'
                            },{
                                fieldLabel : '菜单连接',
                                width : 200,                            
                                xtype : 'textfield',
                                name:'rightMenu.url',
                                allowBlank : false// 该选项值不能为空                                            
                            },{
                                fieldLabel : '菜单描述',
                                width : 200,                            
                                xtype : 'textfield',
                                name:'rightMenu.descn',
                                allowBlank : false// 该选项值不能为空                                            
                            }
                ],
                buttons : [{
                            text : '添加',
                            iconCls:'icon-save',
                            disabled : false,
                            handler : function() {
                                if (addForm.form.isValid()) {
                                    addForm.form.submit({
                                                url : 'rightMenu_add.action',
                                                success : function(form, action) {
                                                    addForm.getForm().reset();
                                                    addWin.hide();    
//                                                    rightUserStore.reload();    
                                                    rightMenuTree.root.reload();
                                                    rightMenuTree.expandAll();
                                                    Ext.Msg.alert('提示','增加菜单成功！');                                                    
                                                },
                                                failure : function(form, action) {
//                                                    rightUserStore.reload();
                                                    rightMenuTree.root.reload();
                                                    rightMenuTree.expandAll();
                                                    addForm.getForm().reset();
                                                    addWin.hide();                                                    
                                                    Ext.Msg.alert('提示','增加菜单失败！');
                                                },
                                                waitMsg : '正在保存数据，稍后...'
                                            });
                                } else {
                                    if (!addForm.form.isValid())
                                        Ext.Msg.alert('提示', '请填写完成再提交!');
                                }
                            }
                        }, {
                            text : '取消',
                            iconCls:'li-cancel',
                            handler : function() {
                                addWin.hide();
                                addForm.getForm().reset();
                            }
                        }]
            });
    addWin = new Ext.Window({
                title : '添加记录',
                layout : 'form',
                width : 350,
                autoHeight:true,
                plain : true,
                closable : true,
                closeAction:'hide',
                items : addForm
            });
    function onInsertNode(){        
        var selectedNode = rightMenuTree.getSelectionModel().getSelectedNode();
        if(selectedNode.id != 'empty'){
        //    alert('a');
            var selectedParentNode = selectedNode.parentNode; //取得父节点
                parentNodeId = selectedParentNode.id;
             Ext.getCmp('addParentNodeId').setValue(parentNodeId);
             Ext.getCmp('tid').setValue(parentNodeId);
             addWin.show();
             Ext.getCmp("add_rightMenuName").focus(true,true);
        }else{
        //    alert('b');
            Ext.Msg.alert('提示','根节点只能有一个');
        }
    } ;
    
    
    /**删除节点**/
    function onDeleteNode(){
        Ext.Msg.confirm('提示', '你是否确定删除此标准?', onDeleteNodeConfirm);
    };
    
    function onDeleteNodeConfirm(btn) {
        if (btn == 'yes') {
            var selectedNode = rightMenuTree.getSelectionModel().getSelectedNode();
            if(selectedNode.id == 'empty'){
                Ext.Msg.alert('提示','您不能删除根节点');
            }else if (selectedNode.hasChildNodes()) {
                Ext.Msg.alert('提示', '该菜单下还有子菜单，请您先删除子菜单');
            } else {
            //    alert(selectedNode.id);
                Ext.Ajax.request({
                            url : "rightMenu_del.action",
                            params : {
                                delId : selectedNode.id
                            },
                            success : function(response, options) {
                                var obj = Ext.util.JSON.decode(response.responseText);
                                if(obj.success == true){
                                    Ext.Msg.alert('提示', '删除菜单成功');
                                    rightMenuTree.root.reload();
                                    rightMenuTree.expandAll();
                                }else{
                                    Ext.Msg.alert('提示', '该菜单下还有菜单信息，请不要删除该菜单');
                                }
                            }
                        });
            }
        }
    };
     updateReader = new Ext.data.JsonReader({
                        root : 'menuItem',
                        successProperty : '@success'
                    }, [{name:'rightMenu.name',mapping:'name'},
                        {name:'rightMenu.id',mapping:'id'},
                        {name:'rightMenu.url',mapping:'url'}
                                                
                        ]);    
    updateForm = new Ext.FormPanel({
                frame : true,
                reader:updateReader,
                // applyTo : 'rightUserFormDiv',
                bodyStyle : 'padding:5px 5px 0',
                autoWidth : true,
                defaults : {
                    labelWidth : 40,
                    labelAlign : 'right'
                    // width:200
                },
                waitMsgTarget : true,
                items : [{
                                fieldLabel : '菜单名称',
                                xtype : 'textfield',
                                width : 200,
                                name : 'rightMenu.name',
                                allowBlank : false,
                                id:'updaterightMenuName'
                            },{
                                xtype:'hidden',
                                name:'rightMenu.id',
                                id:'updaterightMenuId'
                            },{
                                fieldLabel : '菜单连接',
                                width : 200,    
                                xtype:'textfield',
                                name:'rightMenu.url'
                            },{
                                name:'tid',
                                xtype:'hidden',
                                id:'tid1'
                            }        
                ],
                buttons : [{
                            text : '修改',
                            iconCls:'icon-save',
                            disabled : false,
                            handler : function() {
                                var selectedNode = rightMenuTree.getSelectionModel().getSelectedNode();
                                Ext.getCmp('tid1').setValue(selectedNode.parentNode.id);
                                if (updateForm.form.isValid()) {
                                    updateForm.form.submit({
                                                url : 'rightMenu_update.action',
                                                success : function(form, action) {
                                                    updateForm.getForm().reset();
                                                    updateWin.hide();    
                                                    rightMenuTree.root.reload();
                                                    rightMenuTree.expandAll();
                                                    Ext.Msg.alert('提示','修改菜单成功！');    
                                                },
                                                failure : function(form, action) {
                                                    rightMenuTree.root.reload();
                                                    rightMenuTree.expandAll();
                                                    updateForm.getForm().reset();
                                                    updateWin.hide();                                                    
                                                    Ext.Msg.alert('提示','修改菜单失败！');
                                                },
                                                waitMsg : '正在保存数据，稍后...'
                                            });
                                } else {
                                    if (!updateForm.form.isValid())
                                        Ext.Msg.alert('提示', '请填写完成再提交!');
                                }
                            }
                        }, {
                            text : '取消',
                            iconCls:'li-cancel',
                            handler : function() {
                                updateWin.hide();
                                updateForm.getForm().reset();
                            }
                        }]
            });
    updateWin = new Ext.Window({
                title : '修改记录',
                layout : 'form',
                width : 350,
                autoHeight:true,
                plain : true,
                closable : true,
                closeAction:'hide',
                items : updateForm
            });
/** *修改节点* */
    function onUpdate(){
        var selectedNode = rightMenuTree.getSelectionModel().getSelectedNode();
            if(selectedNode.id != 'empty'){
                updateWin.show();
                updateForm.getForm().load({
                    url : 'rightMenu_findRightMenuById.action?delId='
                            + selectedNode.id,
                    waitMsg : '正在载入数据...',
                    failure : function(form, action) {
                        Ext.Msg.alert('提示', '载入菜单信息失败');
                    },
                    success : function(form, action) {
                    }
                });
            }else{
                Ext.Msg.alert('提示','您不能修改根节点');
            }
        
    };
   
    

    /******************************************
     增加子节点
     ******************************************/
   function addChildren(){
           var selectedNode = rightMenuTree.getSelectionModel().getSelectedNode();
         Ext.getCmp('addParentNodeId').setValue(selectedNode.id);
         Ext.getCmp('tid').setValue(selectedNode.id);
         addWin.show();
         Ext.getCmp("add_rightMenuName").focus(true,true);
    };
   
public class MenuBean {
    private Integer id;
    private String text;
    private Integer menuParentId;
    private Integer leaf;
    private String menuUrl;
    private String menuIcon;
    private String functions;
    private boolean expanded;
    
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getText() {
        return text;
    }
    public void setText(String text) {
        this.text = text;
    }
    public Integer getMenuParentId() {
        return menuParentId;
    }
    public void setMenuParentId(Integer menuParentId) {
        this.menuParentId = menuParentId;
    }
    public Integer getLeaf() {
        return leaf;
    }
    public void setLeaf(Integer leaf) {
        this.leaf = leaf;
    }
    public String getMenuUrl() {
        return menuUrl;
    }
    public void setMenuUrl(String menuUrl) {
        this.menuUrl = menuUrl;
    }
    public String getMenuIcon() {
        return menuIcon;
    }
    public void setMenuIcon(String menuIcon) {
        this.menuIcon = menuIcon;
    }
    public String getFunctions() {
        return functions;
    }
    public void setFunctions(String functions) {
        this.functions = functions;
    }
    public boolean getExpanded() {
        return expanded;
    }
    public void setExpanded(boolean expanded) {
        this.expanded = expanded;
    }
}