Direct方式 编辑页面中的 itemselector 的使用

【一】Ext.require([  'Ext.ux.form.ItemSelector'     ]);

Ext.define("setting.pum.user.EditUserPane",{
 extend:"CommonModule",

 init:function(){
  var me = this;
  return me._createPanle();
 },
 _createPanle:function(){
  var me=this;
  var toRoleValue=[];//被选中的 数据值
   var callbackRole=function(result,optes){
   toRoleValue=result.records;
  };
  DirectService.getRoleByUserId(me.userDate.id,callbackRole);
  
  //角色权限
  var userRoleStore=Ext.create('Ext.data.Store',{
   autoLoad:{},
   fields:['id','name'],
   proxy:{
    type:'direct',
    directFn:'DirectUPMService.listRoleBySystemId',
    reader:{
     type:'json',
     root:'records'
    }
   }
  });
  userRoleStore.on('beforeload',function(store,options){
   userRoleStore.proxy.extraParams.systemId =me.systemId;
  });

//扩展  全选，全不选
  Ext.override(Ext.ux.form.ItemSelector,{
   onTopBtnClick: function () {//将top的事件改成全选的事件
    var me = this,
    fromList = me.fromField.boundList,
    allRec = fromList.getStore().getRange();

    fromList.getStore().remove(allRec);
    me.toField.boundList.getStore().add(allRec);
   },
   onBottomBtnClick: function () {
    var me = this,
    toList = me.toField.boundList,
    allRec = toList.getStore().getRange();

    toList.getStore().remove(allRec);
    me.fromField.boundList.getStore().add(allRec);
   }
  });

  var roleForm = Ext.create('Ext.form.Panel', {
   title:"角色设置",
   width: 570,
   height: 330,
   margin:'3 3 0 3',
   frame:false,
   items:[{
    xtype: 'itemselector',
    name: 'itemselector1',
    id: 'itemselector1',
    anchor: '100%',
    height: 295,
    margin:'15 15 15 15',
    frame:false,
    autoScroll: true,
    hideLabel: false,
    buttons: ["top", "add", "remove", "bottom"],
    buttonsText: {
     top:"添加全部>>",
     add:"添加>",
     remove: "<移除  ",
     bottom: "<<移除全部"
    },
    store: userRoleStore,
    fromTitle: '可分配角色',
    toTitle: '已分配角色',
    displayField: 'name',
    valueField: 'id'
   }],
   listeners:{
    activate:function(tab){
     roleForm.getForm().findField('itemselector1').setValue(toRoleValue);
    }
   }
  });
  roleForm.on('beforedestroy',function(){
   roleForm.form.reset();
   roleForm.getForm().findField('itemselector1').onDestroy();
  });

 

//保存事件
    var userSubmit=function(){
          if(Ext.getCmp("itemselector1")){//角色
      var toList=Ext.getCmp("itemselector1").toField.boundList;
      var allRec=toList.getStore().getRange();      
      for(var i=0;i<allRec.length;i++){
       myarrRole.push(allRec[i].get("id"));
      }
     }
        var callback = Util.createDirectCallback(function() {     
      userAddPanel.ownerCt.hide();
     });
     DirectUPMService.updateGroupRoleToUser(me.systemId,userId,myarrGroup,myarrRole,myarrJob,callback);//回调函数 

    },
   });
  };
  return userAddPanel;
 },
 afterInit:function(){
  //alert("afterInit");  
 }
});

 

 

【二】主界面调用的方法

 

setting.pum.UserPane.userEdit=function(v){
   Ext.widget({
    xtype:"window",    title:'编辑用户',
    autoHeight:true,    modal:true,
    height:450,    width:600,
    border:0,    closeAction:'hide',
    listeners:{
     beforeshow:function(tab){
      var module = new setting.pum.user.EditUserPane();
      module.systemId=me.systemId;
      module.userStore=store;
      module.userDate=store.findRecord("id",v).data;
      module.doInit();
      this.add(module.getContainer());
     },
     beforehide:function( tab, eOpts){
      this.removeAll();
     }
    }
   }).show();
  };

 

【java 后台】

@ExtDirectMethod
 public ExtDirectStoreResult getRoleByUserId(String userId){
  List<Role> obj = upmService.listRoleByUserId(userId);
  String[] str=new String[obj.size()];
  for(int i=0;i<obj.size();i++){
   str[i]=obj.get(i).getId();
  }
  return new ExtDirectStoreResult(str);
 }