Ext2.0下拉多选菜单(MultiComboBox)
由于Ext2.0的ComboBox不支持菜单多选,本人花了点时间通过扩展ComboBox功能支持下拉多选功能的MultiComboBox。下面介绍MultiComboBox的使用方式，大家先看看下面的代码：
- Ext
.onReady(function(){
- var formPanel = new
Ext
.FormPanel({
- height : 100
,
// 表单面板的高度
- width : 400
,
// 表单面板的宽度
- labelWidth : 120
,
// 字段标签宽度
- labelAlign : "right"
,
// 字段标签对齐方式
- fileUpload: true
,
//支持文件上传
- defaults : {// 默认form元素类型为textfield
- xtype : "textfield"
,
// 默认类型为textfield
- width : 150
// 默认宽度
- },
- items : [{
- xtype:'multicombo'
,
- width:250
,
- store: new
Ext
.data.SimpleStore({
- fields: ["name"
,
"value"
],
- data:[['测试菜单1'
,
1
],[
'测试菜单2'
,
2
],[
'测试菜单3'
,
3
],[
'测试菜单4'
,
4
]]}),
- valueField :"value"
,
- displayField: "name"
,
- labelSeparator:'：'
,
- displaySeparator:';'
,
- valueSeparator:','
,
- mode: 'local'
,
- value:'1,2'
,
- forceSelection: true
,
- hiddenName:'test'
,
- editable: true
,
- triggerAction: 'all'
,
- allowBlank:false
,
- emptyText:'请选择'
,
- fieldLabel: '多选下拉ComBo'
- }],
- buttons : [{
- text : '提交'
,
- type : 'submit'
,
- handler : function() {
- }
- }]
- });
- formPanel.render("multicombo-div"
);
- });
由上面代码可以看到用法大致和ComboBox一样，不相同的地方是：
- xtype:
'multicombo'
,
//MultiComboBox注册类型名称
- displaySeparator:';'
,
//多选显示分隔字符
- valueSeparator:','
,
//多选提交到后台的值分隔符
- value:'1,2'
,
// 多值通过","分隔，与valueSeparator相对应，表示默认选择了"测试菜单1'"和"测试菜单2"
由于添加了多选CheckBox图标，所以需要在ext
-all.css文件最后添加两行支持样式：
- .checked{background-image:url(../images/
default
/menu/checked.gif)}
- .unchecked{background-image:url(../images/default
/menu/unchecked.gif)}
MultiComboBox的源代码：
- Ext
.form.MultiComboBox = Ext
.extend(Ext
.form.TriggerField, {
- defaultAutoCreate : {tag: "input"
, type:
"text"
, size:
"24"
, autocomplete:
"off"
},
- listClass: ''
,
- selectedClass: 'x-combo-selected'
,
- triggerClass : 'x-form-arrow-trigger'
,
- shadow:'sides'
,
- listAlign: 'tl-bl?'
,
- maxHeight: 300
,
- triggerAction: 'query'
,
- minChars : 4
,
- typeAhead: false
,
- queryDelay: 500
,
- pageSize: 0
,
- selectOnFocus:false
,
- queryParam: 'query'
,
- loadingText: 'Loading...'
,
- resizable: false
,
- handleHeight : 8
,
- editable: true
,
- allQuery: ''
,
- mode: 'remote'
,
- minListWidth : 70
,
- forceSelection:false
,
- typeAheadDelay : 250
,
- displaySeparator:';'
,
- valueSeparator:','
,
- lazyInit : true
,
- initComponent : function(){
- Ext
.form.ComboBox.superclass.initComponent.call(this
);
- this
.addEvents(
- 'expand'
,
- 'collapse'
,
- 'beforeselect'
,
- 'select'
,
- 'beforequery'
- );
- if
(
this
.transform){
- this
.allowDomMove =
false
;
- var s = Ext
.getDom(this
.transform);
- if
(!
this
.hiddenName){
- this
.hiddenName = s.name;
- }
- if
(!
this
.store){
- this
.mode =
'local'
;
- var d = [], opts = s.options;
- for
(var i =
0
, len = opts.length;i < len; i++){
- var o = opts[i];
- var value = (Ext
.isIE ? o.getAttributeNode('value'
).specified : o.hasAttribute(
'value'
)) ? o.value : o.text;
- if
(o.selected) {
- this
.value = value;
- }
- d.push([value, o.text]);
- }
- this
.store =
new
Ext
.data.SimpleStore({
- 'id'
:
0
,
- fields: ['value'
,
'text'
],
- data : d
- });
- this
.valueField =
'value'
;
- this
.displayField =
'text'
;
- }
- s.name = Ext
.id(); // wipe out the name in case somewhere else they have a reference
- if
(!
this
.lazyRender){
- this
.target =
true
;
- this
.el = Ext
.DomHelper.insertBefore(s,
this
.autoCreate ||
this
.defaultAutoCreate);
- Ext
.removeNode(s); // remove it
- this
.render(
this
.el.parentNode);
- }else
{
- Ext
.removeNode(s); // remove it
- }
- }
- this
.selectedIndex = -
1
;
- if<