(转)Extjs 中的ItemSelector

一 Extjs中的插件ItemSelector，使用中的注意事项
   使用中需要引用3个文件，MultiSelect.js ，ItemSelector.js，MultiSelect.css
二、参考官方示例程序，中文表现为乱码，需要将以上文件，另存为utf-8格式
三、官方示例程序程序中，如果不做修改，只能获取displayText
四、如果采用json从后台获取，不能自定义displayField和valueField属性,否则在接受框没有选择的值出现.
  因笔者通过SQL语句以value text方式，发现数据库不允许这样操作，提示为系统保留字符存在，例如以下语句：
  select sId as value,Stext as text from xxx
为此，对该插件，笔者修改一下几个地方，可以完善：
1：修改MultiSelect.js插件,将使用value 和text位置，变更为_value  _text,主要是以下位置

if(Ext.isArray(this.store)){
            if (Ext.isArray(this.store[0])){
                this.store = new Ext.data.ArrayStore({
                    fields: ['_value','_text'],
                    data: this.store
                });
                this.valueField = '_value';
            }else{
                this.store = new Ext.data.ArrayStore({
                    fields: ['_text'],
                    data: this.store,
                    expandData: true
                });
                this.valueField = '_text';
            }
            this.displayField = '_text';
        } else {
            this.store = Ext.StoreMgr.lookup(this.store);
        }


//后台返回的字段为_value 和_text,例如：
//select sID as _value,Stext as _text from XXX等语句
//采用json获取数据代码可参考一下方式：
var DSformstore=new Ext.data.Store({
baseParams:{classid:classid},  //带有参数
autoLoad:true,
autoDestroy:true,
proxy:new Ext.data.HttpProxy({
method:'GET',
url:'GetPowerList.asp?Action=GetGParray&'
}),
reader:new Ext.data.JsonReader({
},['_value','_text'])
});


//接受框store ,定义如下:
var storeTo = new Ext.data.ArrayStore({
fields: ['_value', '_text']
   });

2: 为获取选择框的value值，需要修改ItemSelector的setValue()函数，笔者代码参考以下网址：
http://abgne.tw/ext-js/ext-js-tips/itemselector-setvalue-item.html

Ext.override(Ext.ux.form.ItemSelector, {
setValue: function(values) {
var index;
var selectionsArray = [];
this.toMultiselect.view.clearSelections();
this.hiddenField.dom.value = '';
 
if (!values || (values == '')) { return; }
 
if (!Ext.isArray(values)) { values = values.split(this.delimiter); }
for (var i=0; i<values.length; i++) {
index = this.fromMultiselect.view.store.indexOf(this.fromMultiselect.view.store.query(this.fromMultiselect.valueField, new RegExp('^' + values[i].trim() + '$', "i")).itemAt(0));
if (index > -1) {
selectionsArray.push(index);
}
}
 
var records = [], record;
if (selectionsArray.length > 0) {
for (var i=0; i<selectionsArray.length; i++) {
var record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);
records.push(record);
}
if(!this.allowDup)selectionsArray = [];
for (var i=0; i<records.length; i++) {
record = records[i];
if(this.allowDup){
var x=new Ext.data.Record();
record.id=x.id;
delete x;
this.toMultiselect.view.store.add(record);
}else{
this.fromMultiselect.view.store.remove(record);
this.toMultiselect.view.store.add(record);
selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
}
}
}
this.toMultiselect.view.refresh();
this.fromMultiselect.view.refresh();
var si = this.toMultiselect.store.sortInfo;
if(si){
this.toMultiselect.store.sort(si.field, si.direction);
}
this.toMultiselect.view.select(selectionsArray);
}
});

3：具体使用方法举例如下：（这里直接是应用官方示例程序，没有使用json从后台获取数据，同时也没有修订value 及text为_value _text

 var dsform = new Ext.data.ArrayStore({
        data: [[123,'One Hundred Twenty Three'],
            ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
            ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
        fields: ['value','text'],
        sortInfo: {
            field: 'value',
            direction: 'ASC'
        }
    });




var dsto = new Ext.data.ArrayStore({
fields: ['value', 'text']
   });
    
    var isForm = new Ext.form.FormPanel({
        title: 'ItemSelector Test',
        width:700,
        bodyStyle: 'padding:10px;',
        renderTo: 'itemselector',
        items:[{
            xtype: 'itemselector',
            name: 'itemselector',
            fieldLabel: 'ItemSelector',
       imagePath: '../ux/images/',
            multiselects: [{
                width: 180,
                height: 200,
                store: dsform ,
                displayField: 'text',
                valueField: 'value'
            },{
                width: 150,
                height: 200,
                store: dsto,
displayField: 'text',
                valueField: 'value',
                tbar:[{
                    text: '清除选择项目',
                    handler:function(){
                   isForm.getForm().findField('itemselector').reset();
               }
                }]
            }]
        }],


        buttons: [{
            text: 'Save',
            handler: function(){
                if(isForm.getForm().isValid()){
                    Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
                        isForm.getForm().getValues(true));
                }
            }
        }]
    });

运行结果如下
可以获取value值，而非displayText