Extjs 中的itemselector用法

先看下图片，知道它是什么样子的

一 加入itemselector控件

var isForm = new Ext.form.FormPanel({
            items : [{
                xtype : 'itemselector',
                id:'itemselector',
                anchor : '100%',
                name : 'itemselector',
                hideLabel : true,
                style : 'margin-top:10px;margin-left:10px;margin-right:10px;',
                imagePath : 'extjs/examples/ux/images/',
                multiselects : [{
                            id:'left',
                            width : 162,
                            height : 240,
                            legend : "附加显示字段：",
                            store :dsleft,
                            valueField : 'value',
                            displayField : 'text'
                        }, {
                            id:'right',
                            width : 162,
                            height : 230,
                            legend : "凭单纵向显示字段：",
                            store:dsright,
                            valueField : 'value',
                            displayField : 'text',
                            tbar : [{
                                text : '清除',
                                handler : function() {
                                    isForm.getForm().findField('itemselector')
                                            .reset();
                                }
                            }]
                        }],
            }]
        });  

二 获取 右边框设置的内容（注意是value值）：

 

if(isForm.getForm().isValid()){
                                      saveacct=isForm.getForm().findField('itemselector').getValue();                           
                                     } 

三 给向右添加的按钮添加事件

 

isForm.getForm().findField('itemselector').addIcon.on('click',function(){
                   var i=isForm.getForm().findField('itemselector');
                   if(i.toMultiselect.view.store.getCount()>0){
                       addIcon(i);//相应的操作函数
                   }
               }, this); 

四 其他按钮事件

this.toTopIcon.on('click', this.toTop, this);
        this.upIcon.on('click', this.up, this);
        this.downIcon.on('click', this.down, this);
        this.toBottomIcon.on('click', this.toBottom, this);
        this.addIcon.on('click', this.fromTo, this);
        this.removeIcon.on('click', this.toFrom, this);

五 获取左边框内容（被选择的内容）

 var selectionsArray = i.fromMultiselect.view.getSelectedIndexes();
                if (selectionsArray.length > 0) {
                    record = i.fromMultiselect.view.store.getAt(selectionsArray[0]);
                    var value=record.get('value');
                    if(!selectEle(value)){  //判断value值是否符合要求
                        Ext.MessageBox.show({  
                                      title: '提示',  
                                      msg: "该属性不允许设置",  
                                      buttons: {yes:'确定'},  
                                      fn:function(buttonId){  
                                      if(buttonId == 'yes'){  
                                          dsleft.reload();
                                          dsright.reload();
                                         }  
                                      }  
                                }); 

                       }
                  }