extjs 4.2 编辑界面 itemselector 的使用（Direct）

createRoleStore:function(){
  var me=this;  
  var toRoleValue=[];
  var callbackRole=function(result,optes){
   toRoleValue=result.records;                               //得到itemselector被选择的值(右边的值)
  };
  DirectUPMService.listRoleByRoleUserId(me.getUserDate().id,callbackRole);
  
  var roleStore=Ext.create('Ext.data.Store',{          //itemselector的store
   autoLoad:{},
   fields:['id','name'],
   proxy:{
    type:'direct',
    directFn:'DirectUPMService.listRoleBySystemId',
    reader:{
     type:'json',
     root:'records'
    }
   }
  });
  roleStore.on('beforeload',function(store,options){
   roleStore.proxy.extraParams.systemId =me.getSystemId();
  });
  roleStore.on('load',function(){    //在load完成是对Itemselector富默认值
   me.roleForm.getForm().findField('roleISelector').setValue(toRoleValue);
  });
  me.roleStore=roleStore;
 },

 

 

 

 

createRoleForm:function(){
  var me=this;  
  me.createRoleStore();
  var roleForm = Ext.create('Ext.form.Panel', {
   title:"角色设置",
   width: 570,
   height: 330,
   margin:'3 3 0 3',
   frame:false,
   items:[{
    xtype: 'itemselector',
    name: 'roleISelector',
    id: 'roleISelector',
    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: me.roleStore,
    fromTitle: '可分配角色',
    toTitle: '已分配角色',
    displayField: 'name',
    valueField: 'id'
   }]
  });
  roleForm.on('beforedestroy',function(){
   roleForm.form.reset();
   roleForm.getForm().findField('roleISelector').onDestroy();
  });
  me.roleForm=roleForm;
  return roleForm;
 },

 

 

 

///////////////////////////////////////////////////////////////////////////

function expandItemSelector(){
 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);
  }
 });
};