Extjs怎么实现下拉框多选
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Extjs怎么实现下拉框多选相关的知识，希望对你有一定的参考价值。
以下是我的代码，我是菜鸟，各位小弟大神求助。下面这样写只能实现单选
js文件：
Ext.define('jwapp.jcyy.JwglDepotComboBox2',
extend:'Ext.form.field.ComboBox',
initComponent: function()
var me = this;
me.minChars = 2;
me.triggerAction = 'all';
me.displayField = 'name';
me.valueField = 'id';
me.typeAhead = true;
me.queryMode = 'remote';
me.store = new Ext.data.JsonStore(
fields:[name: 'id',
name: 'name'],
autoLoad: true,
proxy:
type: 'ajax',
xtype: 'combo',
url : Ext.ctxpath+'/commons/getGyjcDep.do',
reader:
type: 'json',
root: 'items',
totalProperty: 'total'
);
me.callParent();
);
=======jsp调用此js：
var duanbie = Ext.create('jwapp.jcyy.JwglDepotComboBox2',
labelAlign: 'right',
labelWidth:45,
selType : 'checkboxmodel',
width :65
);
1、扩展js类库，在项目中建立一个 js文件，命名为:xxx.js 其代码为
if (\'function\' !== typeof RegExp.escape)RegExp.escape = function (s)
if (\'string\' !== typeof s)
return s;
return s.replace(/([.*+?^=!:$()|[\\]\\/\\\\])/g, \'\\\\$1\');
;
Ext.ns(\'Ext.form\');
Ext.form.MultiSelect = Ext.extend(Ext.form.ComboBox,
checkField: \'checked\',
multi: true,
separator: \',\',
initComponent: function ()
if (!this.tpl)
this.tpl = \'<tpl for=".">\' + \'<div class="x-combo-list-item">\'
+ \'<img src="\' + Ext.BLANK_IMAGE_URL + \'" \'
+ \'class="ux-MultiSelect-icon ux-MultiSelect-icon-\'
+ \'[values.\' + this.checkField + \'?"checked":"unchecked"\'
+ \']">\'
+ \'[values.\' + this.displayField + \']\'
+ \'</div>\'
+ \'</tpl>\';
Ext.form.MultiSelect.superclass.initComponent.apply(this, arguments);
this.on(
scope: this,
beforequery: this.onBeforeQuery,
blur: this.onRealBlur
);
this.onLoad = this.onLoad.createSequence(function ()
if (this.el)
var v = this.el.dom.value;
this.el.dom.value = \'\';
this.el.dom.value = v;
);
,
initEvents: function ()
Ext.form.MultiSelect.superclass.initEvents.apply(this, arguments);
this.keyNav.tab = false;
,
beforeBlur: function ()
,
postBlur: function ()
,
clearValue: function ()
this.value = \'\';
this.setRawValue(this.value);
this.store.clearFilter();
this.store.each(function (r)
r.set(this.checkField, false);
, this);
if (this.hiddenField)
this.hiddenField.value = \'\';
this.applyEmptyText();
,
getCheckedDisplay: function ()
var re = new RegExp(this.separator, "g");
return this.getCheckedValue(this.displayField).replace(re, this.separator + \' \');
,
getCheckedValue: function (field)
field = field || this.valueField;
var c = [];
var snapshot = this.store.snapshot || this.store.data;
snapshot.each(function (r)
if (r.get(this.checkField))
c.push(r.get(field));
, this);
return c.join(this.separator);
,
onBeforeQuery: function (qe)
qe.query = qe.query.replace(new RegExp(RegExp.escape(this.getCheckedDisplay()) + \'[ \' + this.separator + \']*\'), \'\');
,
onRealBlur: function ()
this.list.hide();
var rv = this.getRawValue();
var rva = rv.split(new RegExp(RegExp.escape(this.separator) + \' *\'));
var va = [];
var snapshot = this.store.snapshot || this.store.data;
Ext.each(rva, function (v)
snapshot.each(function (r)
if (v === r.get(this.displayField))
va.push(r.get(this.valueField));
, this);
, this);
this.setValue(va.join(this.separator));
this.store.clearFilter();
,
onSelect: function (record, index)
if (this.fireEvent(\'beforeselect\', this, record, index) !== false)
record.set(this.checkField, !record.get(this.checkField));
if (this.store.isFiltered())
this.doQuery(this.allQuery);
if (this.multi)
if (record.get("key") == "---" && record.get(this.checkField))
this.setValue("---");
else
this.setValue(this.getCheckedValue());
else
this.clearValue();
this.value = record.get(this.valueField);
this.setRawValue(record.get(this.displayField));
this.list.hide();
this.fireEvent(\'select\', this, record, index);
,
setValue: function (v)
if (v)
v = \'\' + v;
if (this.valueField)
this.store.clearFilter();
this.store.each(function (r)
var checked = !(!v.match(\'(^|\' + this.separator + \')\'
+ RegExp.escape(r.get(this.valueField))
+ \'(\' + this.separator + \'|$)\'));
r.set(this.checkField, checked);
, this);
this.value = this.getCheckedValue();
this.setRawValue(this.getCheckedDisplay());
if (this.hiddenField)
this.hiddenField.value = this.value;
else
this.value = v;
this.setRawValue(v);
if (this.hiddenField)
this.hiddenField.value = v;
if (this.el)
this.el.removeClass(this.emptyClass);
else
this.clearValue();
,
selectAll: function ()
this.store.each(function (record)
record.set(this.checkField, true);
, this);
this.doQuery(this.allQuery);
this.setValue(this.getCheckedValue());
,
deselectAll: function ()
this.clearValue();
);
Ext.reg(\'multiSelect\', Ext.form.MultiSelect);
2、在ext-all.css文件最后，加入css样式
.ux-MultiSelect-icon width:16px; height:16px; float:left; background-position: -1px -1px ! important; background-repeat:no-repeat ! important;.ux-MultiSelect-icon-checked background: transparent url(../images/default/menu/checked.gif);
.ux-MultiSelect-icon-unchecked background: transparent url(../images/default/menu/unchecked.gif);
3、使用
proxy: new Ext.data.HttpProxy(
url:\'/Web/Manage/DeskTop/JSON/ScheduleManager/GetSimpleDepartUserInfo.aspx\'
),
//读取Json
reader: new Ext.data.JsonReader(
totalProperty: "totalCount", root: "root" ,
[
name:\'UserId\',type:\'int\',
name:\'UserName\',type:\'string\'
])
);
var DepartUserCbox = new Ext.form.MultiSelect(
fieldLabel: \' 姓名\',
labelStyle: \'width:80px\',
width: 150,
editable: false,
id: \'DepartUserDS\',
hiddenName:\'DepartUserIdDS\',
store: DepartUserStore,
emptyText: \'--请选择--\',
allowBlank: false,
blankText: \'请选择\',
mode:\'remote\',
displayField: \'UserName\',
valueField: \'UserId\',
triggerAction: \'all\',
selectOnFocus: true,
listWidth: 200
);
DepartUserStore.on(\'load\', function ()
DepartUserCbox.selectAll(); //全选
);
DepartUserStore.load(); 参考技术A 开始以为很简单，在option里加个input checkbox就行了。哪知行不通，网上搜了一些实现方法，主要是用div层来模拟下拉。本想照着这种思路，再结合这个项目具体应用自己写一个，发现太麻烦了。刚好在另外一个项目中使用extjs，找到了一个扩展lovcombo，学习了一下它自带的例子（配合2.3版的extjs，3.x版的貌似有问题）。例子倒不难，关键是要把它添加到现有的代码中，并且尽量少的改动原有代码。
下拉多选框的使用过程中处理比较多的逻辑主要集中在数据源store的配置和select事件的处理。extjs本身的那种数据和UI分离的模式使得级联的实现非常轻松。只需在省份下拉框的select事件中去更新城市下拉框的store即可。一个需要注意的小地方是：一个选项被select时，需要额外的通过checkField的值来判断该选项是被选中还是被取消。还有就是全选、取消全选（这两个lovcombo自带有方法selectAll和deselectAll）以及被选中选项数目（需要遍历一遍store，并检测每一项的checkField值）。
复制代码 代码如下:
//下拉框的select事件
select:function(combo, record, index)
//选中
if(record.get(this.checkField))
//选中时的处理逻辑
else
//未选中
参考技术B multiSelect: true 参考技术C http://blog.163.com/china__xuhua/blog/static/19972316920124179422320/
jquery实现下拉框多选
一、说明
本文是利用EasyUI实现下拉框多选功能，在ComboxTree其原有的基础上对样式进行了改进，样式表已上传demo，代码如下
二、代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>利用EasyUI实现多选下拉框</title> <link rel="stylesheet" type="text/css" href="EasyUI/easyui.css" /> <script type="text/javascript" src="EasyUI/jquery.min.js"></script> <script type="text/javascript" src="EasyUI/jquery.easyui.min.js"></script> <script type="text/javascript"> $(function () { $(\'#ddlLine\').combotree({ valueField: "id", //Value字段 textField: "text", //Text字段 multiple: true, data: [{ "id": 1, "text": "All", "children": [{ "id": 13, "text": "C1" }, { "id": 14, "text": "C2" }, { "id": 15, "text": "C3"}]}], // url: "tree_data2.json", //数据源 onCheck: function (node, checked) { //让全选不显示 $("#ddlLine").combotree("setText", $("#ddlLine").combobox("getText").toString().replace("全选,", "")); }, onClick: function (node, checked) { //让全选不显示 $("#ddlLine").combotree("setText", $("#ddlLine").combobox("getText").toString().replace("全选,", "")); } }); }) </script></head><body> 多选：<select id="ddlLine" class="easyui-combotree" style="width: 205px; height: 24px;"> </select></body></html> |
三、效果
四、下载
以上是关于Extjs怎么实现下拉框多选的主要内容，如果未能解决你的问题，请参考以下文章