您的位置:首页 > Web前端 > JavaScript

[Ext JS 4] 实战之多选下拉单 (带checkbox)

2015-10-22 18:15 501 查看


前言

Ext js 创建一个多选下拉单的方式很简单, 使用Ext.form.ComboBox, 设置 multiSelect 为true 就可以了。

但是如果要在每个下拉之前加上一个checkbox, 如何实现呢?

ComboBox本身没有这样的配置,

有一个 “Ext.ux.form.MultiSelect” 这样一个扩展, 效果的话,是把选项全部显示出来。

没办法只能自己扩展一个这样的组件了。


界面实现

要实现这样的显示,可以使用ComboBox 的listConfig 这个配置。

可以配置listConfig的itemTpl来显示每个选项的显示效果,

itemTpl : Ext.create('Ext.XTemplate',
'<input type=checkbox>{value}'),



功能联动

显示效果出来了并没有介绍,

在选中某个选项时, 其前面的checkbox 应该是选中状态;

反选某个,其前面的checkbox 应该是非选中状态。

解决方式是在listConfig下配置 itemclick 的listeners

listeners:{
itemclick:function(view, record, item, index, e, eOpts ){
var isSelected = view.isSelected(item);
var checkboxs = item.getElementsByTagName("input");
if(checkboxs!=null)
{
var checkbox = checkboxs[0];
if(!isSelected)
{
checkbox.checked = true;
}else{
checkbox.checked = false;
}
}
}
}



动态store

以上方式在本地store 的状态下是可以的。

var states2 = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});


但是通过ajax 方式取store 数据的状况就会出现一个问题。
proxy: {
type: 'ajax',
url: '/users.json',
reader: {
type: 'json',
root: 'users'
}
},


选中之后, 下一次点击下拉单的话, 之前选中的check box 会被取消选择。

原因是这种方式会更新 combobox 的下拉选项(combobox), 试图通过在refresh , render 事件中加入处理, 发现不行。

最终追踪代码,可以通过覆盖onItemSelect的方法实现。
Ext.define('Ext.ux.MultiComboBox', {
extend: 'Ext.form.ComboBox',
alias: 'widget.multicombobox',
xtype: 'multicombobox',
initComponent: function(){
this.multiSelect = true;
this.listConfig = {
itemTpl : Ext.create('Ext.XTemplate',
'<input type=checkbox>{value}'),
onItemSelect: function(record) {
var node = this.getNode(record);
if (node) {
Ext.fly(node).addCls(this.selectedItemCls);

var checkboxs = node.getElementsByTagName("input");
if(checkboxs!=null)
{
var checkbox = checkboxs[0];
checkbox.checked = true;
}
}
},
listeners:{
itemclick:function(view, record, item, index, e, eOpts ){
var isSelected = view.isSelected(item);
var checkboxs = item.getElementsByTagName("input");
if(checkboxs!=null)
{
var checkbox = checkboxs[0];
if(!isSelected)
{
checkbox.checked = true;
}else{
checkbox.checked = false;
}
}
}
}
}
this.callParent();
}
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: