最近搞了一个设置用户组的用户及可用功能树

最近自己开发了一个小型的订单管理系统，应用了EXTJS，前段时间一直被

Ext.tree.TreeLoader不能随选择不同用户组来显示不同的功能树困扰，今天终于搞定了。

首先，自定义一个Ext.tree.TreePanel的Ext.extend(),然后把生成treePanel的代码，和new Ext.Window()放在同一个打开弹窗的方法中，代码如下

function goupSelWinShow(){

//treeLoader定义

 var checkTreeLoader = new Ext.tree.TreeLoader({dataUrl:'getCheckTree',clearOnLoad:true});

//treePanel定义

 var checkTreePanel = new App.vs.CheckTreePanel({
   id : 'checkTreeGrid',
   loader : checkTreeLoader
  });
 
 //选择用户组
  var s = groupGrid.getSelectionModel().getSelections();
  for(var i = 0, r; r = s[i]; i++){
   var ug = groupStore.getAt(groupStore.indexOf(r)).data;
   selUserStore.baseParams = {'uguid':ug.userid };
   selUserStore.proxy = new Ext.data.HttpProxy({url:"getSysAccountForGroup",method:"POST"});
   selUserStore.load({params:{start:0, limit:10}});

   var mid = ug.id;

   //treeLoad的事件

   checkTreeLoader.on('beforeload',function(checkTreeLoader){
    checkTreeLoader.baseParams = {userGroupID : mid};
   });
  }  

 //弹窗的form

  var selForm = new Ext.FormPanel({
   autoWidth : true,
   height : 550,
   layout : 'column',
      items:[{columnWidth : 0.70,
     layout : 'fit',
     items : [selusergrid]},
     {columnWidth : 0.30,
     layout : 'fit',
     items : [checkTreePanel]}],
      buttonAlign : 'center',
      buttons:[{
              text : '确定',
              formBind : true, 
              handler : closeWin     
          }]
  });

//生成弹窗

   groupSelWin = new Ext.Window({
    id:'selectWindow',
    title:'用户组授权',
    layout:'fit',
       width:750,
       height:550,
       closeAction:'close',//这儿要用close,具体可以参考extjs API
       plain: true,
       border: false,
    items:[selForm]
    });
  groupSelWin.show(this);
 };

 

function closeWin(){

   groupSelWin.close();//关闭弹窗
  groupSelWin = null;

}

如下图:

选择第二个用户组：