ExtJS 扩展组件学习之列表框 Ext.ux.Multiselect
使用ExtJS的一个扩展插件：Ext.ux.Multiselect，也就是列表框组件。对该组件相关处理以及数据绑定、动态设置
总结一下处理的小方法：
一、数据绑定
//创建记录类型person
var person = Ext.data.Record.create([
{ name: 'tValue', mapping: 1 },
{ name: 'tText', mapping: 2 },
]);//创建数据解析器
var reader = new Ext.data.ArrayReader({ id: 0 }, person);//创建HttpProxy代理
var proxy = new Ext.data.HttpProxy({
url: '/Admin/Theme.aspx?Action=ThemeList'
});//创建数据集Store
var store = new Ext.data.Store({
autoLoad: true,
proxy: proxy,
reader: reader
});
.......................//若干代码
//创建Ext.ux.Multiselect组件
new Ext.ux.Multiselect({
id: "theme", name: 'theme',
dataFields: ["tValue", "tText"],
store: store, //或者使用如下数据：
//data: [["1", "根"], ["2", "Image"], ["3", "CSS"], ["4", "JavaScript"], ["5", "resources"]],
valueField: "tValue",
displayField: "tText",
width: 200,
height: 100,
legend: "主题列表"
}),.......................//若干代码
二、动态设置数据项
var themeStore = Ext.getCmp('theme').store;
if (themeStore != null) {
var record = new Object();
record.tValue = "2";
record.tText = "3";
themeStore.add(new Ext.data.Record(record));
其实这里的操作，仅仅是操作Ext.data.Store对象，如删除项的操作，可以查询API文档。另外，对于如下行：
var themeStore = Ext.getCmp('theme').store;
不可以在渲染（render）事件中直接获取，因为在render事件中像：Ext.getCmp('theme')，是获取不到对象的（延时原因）。
解决的办法可以使用Ext.util.TaskRunner对象。其它的问题正在研究中...
三、数据项的获取
方法一：
Ext.getCmp('theme').getValue();
方法二：
fPanel.getForm().getValues(false)['theme'];
注：fPanel为Multiselect所属的FormPanel对象，且此方法获取值时，必须给Multiselect定义name属性（此处为 'theme')。
方法三：
listeners: {
"click": function(mult, e) {
var value = e.target.innerText;
if (value == null || value == "") {
Ext.getCmp('theme').setValue('');
return;
}
Ext.getCmp('theme').setValue(value); //m.store.getAt(e.target.viewIndex).data
}
} 注：仅限在click事件中，其实这里的e.target.innerText仅是显示的displayField字段，并不是值。而 “m.store.getAt(e.target.viewIndex).data”获取到的是最后单击行的 Record 对象，当然它包含valueField和displayField两个字段。对于如何仅获取displayField，请看下面第五点。
四、设置数据项只能单选
其实本人最初使用Multiselect的目的是想设置ComboBox更高一些，这样能浏览更多的数据元素。但是，至少到目前还没有发现 Multiselect对象有这样的一个属性来设置只能单选（源码中也没有发现），于是乎想到这样一个笨方法：获取最后一次单击的数据项，并设置 ComboBox的值为最后一次单击数据项的值，如下：
new Ext.ux.Multiselect({
id: "theme",
name: "theme",
dataFields: ["tValue", "tText"],
store: themeStore,
valueField: "tValue",
displayField: "tText",
width: 200,
height: 100,
legend: "主题列表",
listeners: {
"click": function(mult, e) {
var value = e.target.innerText;
if (value == null || value == "") {
Ext.getCmp('theme').setValue('');
return;
}
Ext.getCmp('theme').setValue(value);
}
}
})
注：参数e是click事件中传递的参数，而e.target.innerText就是当前单击数据项的值，该方法本人仅在IE中测试过，其它浏览器没有测试，为了解决兼容性问题，可以使用如下方法获取：
"click": function(mult, e) {
var values = fPanel.getForm().getValues(false)['theme'];
if (values == null || values == "") {
Ext.getCmp('theme').setValue('');
return;
}
var items = fPanel.getForm().getValues(false)['theme'].split(',');
var item = items[items.length - 1];
Ext.getCmp('theme').setValue(item);
} 注：fPanel为Multiselect所属为FormPanel对象，这个方法其实就是先解析Multiselect组件最后一次单击数据项的值，然后重新设置Multiselect的值为最后一次单击数据项的值即可。显然，比上一个方法更麻烦一点。
另外，其实上一个方法中，参数e有哪些属性和方法，我是测试得来的，网上有类似的获取方法，如下：
function printf(obj) {
var props = "";
for(var p in obj){
if(typeof(obj[p])=="function"){
//obj[p](); //获取到一个函数成员，如果非必须，注释这句，有些时候会因为这句js无法运行。
}else{
props+= p + "=" + obj[p] + "\t";
}
}
alert(props);
} 这样，可以通过打印参数e中的成员，来测试它有哪些属性、方法等。
五、Multiselect扩展以实现获取displayField字段
Multiselect.js文件，找到如下行(3.0版本)：
getValue: function(valueField){
........
},
在之后添加如下：
getText: function(valueField) {
var returnArray = [];
var selectionsArray = this.view.getSelectedIndexes();
if (selectionsArray.length == 0) { return ''; }
for (var i = 0; i < selectionsArray.length; i++) {
returnArray.push(this.store.getAt(selectionsArray).get(this.displayField));
}
return returnArray.join(this.delimiter);
},即可通过Ext.fly('theme').getText()获取到当前所有被选择项的displayField字段。