Extjs的itemselector用法

var store = new Ext.data.Store({
    // autoLoad:true,
    // 获取数据的方式
    proxy : new Ext.data.HttpProxy({
       url : 'connCfgManage.do?reqCode=getChannelCode'
      }),
    // 数据读取器
    reader : new Ext.data.JsonReader({
       autoLoad : false,
       totalProperty : 'TOTALCOUNT', // 记录总数
       root : 'ROOT' // Json中的列表数据根节点
      }, [{
         name : 'channelCode'
        }])
   });

 var store2 = new Ext.data.Store({
    autoLoad : false,
    // 获取数据的方式
    proxy : new Ext.data.HttpProxy({
       url : 'accountChannel.do?reqCode=getAccountChannelInfo'
      }),
    // 数据读取器
    reader : new Ext.data.JsonReader({
       autoLoad : true,
       totalProperty : 'TOTALCOUNT', // 记录总数
       root : 'ROOT' // Json中的列表数据根节点
      }, [{
         name : 'channelCode'
        }])
   });
 var sm = new Ext.grid.CheckboxSelectionModel({
    singleSelect : false
   });

 var isForm = new Ext.form.FormPanel({
    title : '商户账号渠道配置选择',
    width : 700,
    region : 'center',
    buttonAlign : 'center',
    bodyStyle : 'padding:10px;',// 定义样式表
    items : [{
     xtype : 'itemselector',
     name : 'itemselector',
     id : 'myIt',
     toLegend : "已选栏",
     fromLegend : "可选栏",
     drawUpIcon : false,
     drawDownIcon : false,
     drawLeftIcon : true,
     drawRightIcon : true,
     drawTopIcon : false,
     drawBotIcon : false,
     hideLabel : false,
     imagePath : '../resource/extjs3.1/ux/images/',// 左右移动的图片
     multiselects : [{// 定义左边数据
      legend : '可选渠道',
      width : 250,
      height : 300,
      store : store,
      displayField : 'channelCode',
      valueField : 'channelCode'
     }, {
      legend : '已有渠道',
      width : 250,
      height : 300,
      displayField : 'channelCode',
      valueField : 'channelCode',
      store : store2,
      tbar : [{
       text : '清除所有',
       iconCls : 'deleteIcon',
       handler : function() {
        isForm.getForm().findField('itemselector')
          .reset();
       }
      }]
     }]
    }],
    buttons : [{
       text : '提交列表',
       iconCls : 'acceptIcon',
       handler : function() {
        saveAccountBank();
       }
      }, {
       text : '关闭',
       iconCls : 'deleteIcon',
       handler : function() {
        cWindow.close();
       }
      }]
   });


store.load({
    params : {
     connType : threeForm.getForm().findField('connType')
       .getValue()
    },
    callback : function() {
     editChannelCode();
    }
   });

 function editChannelCode() {
  if ("defaultEdit" == temp || "customizedEdit" == temp) {
   store2.load({
      params : {
       connType : threeForm.getForm()
         .findField('connType').getValue(),
       merId : merId,
       merAccount : merAccount,
       temp : temp
      },
      callback : function(records, options, success) {
       for (i = 0; i < records.length; i++) {
        var channelCode = records[i].get('channelCode');
        var index = store.find("channelCode",
          channelCode);
        store.removeAt(index);
       }
      }
     });} else if ("customized" == temp || "default" == temp) {
   store2.removeAll();
  }
 }


var channelCode = Ext.getCmp("myIt").getValue();

获取右边的所有值

效果如下:

Extjs的itemselector用法

你可能感兴趣的:(ExtJs)