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字段。 
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值