ext-2.0扩展多选下拉框(代码及演示)

说明：

感谢飞天色鼠和javaeye论坛的sp2，其实是改了飞天色鼠的代码。sp2给了很大帮助，感谢！

演示效果：





调用代码如下：

var auto_field=new Ext.form.MultiSelectField();
if(contextlist==null)
{
auto_field.contextArray=
[
['1','一'],
['2','二'],
['3','三']
]
}
else
{
auto_field.contextArray=contextlist;
}
auto_field.fieldLabel=text;
auto_field.id=id;
auto_field.name=id;
return auto_field;

代码如下：

Ext.form.MultiSelectField = Ext.extend(Ext.form.TriggerField, {
readOnly : true ,
defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
displayField : 'text',
contextArray: undefined, //必须满足每行至少两列,第一、二列分别为[value,text]
valueField : undefined,
hiddenName : undefined,
listWidth : undefined,
minListWidth : 50,
layerHeight : undefined,
minLayerHeight : 60,
value : undefined,
baseParams : {},
checkpanel:undefined,
initComponent : function()
{
Ext.form.MultiSelectField.superclass.initComponent.call(this);
this.addEvents
(
'select',
'expand',
'collapse',
'beforeselect'
);
if(this.transform)
{
this.allowDomMove = false;
var s = Ext.getDom(this.transform);
if(!this.hiddenName)
{
this.hiddenName = s.name;
}
s.name = Ext.id();
if(!this.lazyRender)
{
this.target = true;
this.el = Ext.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
Ext.removeNode(s);
this.render(this.el.parentNode);
}else{
Ext.removeNode(s);
}
}
},
onRender : function(ct, position)
{
Ext.form.MultiSelectField.superclass.onRender.call(this, ct, position);
if(this.hiddenName)
{
this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id: (this.hiddenId||this.hiddenName)},
'before', true);
this.hiddenField.value =
this.hiddenValue !== undefined ? this.hiddenValue :
this.value !== undefined ? this.value : '';
this.el.dom.removeAttribute('name');
}
if(Ext.isGecko){
this.el.dom.setAttribute('autocomplete', 'off');
}
this.initList();
},
initList : function()
{
if(!this.list)
{
var cls = 'x-multiselectfield-list';
this.list = new Ext.Layer
({
shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
});
var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
this.list.setWidth(lw);
this.list.swallowEvent('mousewheel');
this.innerList = this.list.createChild({cls:cls+'-inner'});
this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
this.innerList.setHeight(this.layerHeight || this.minLayerHeight);
if(!this.checkpanel)
{
this.checkpanel = this.CheckPanel(this.innerList);
}
this.checkpanel.render();
}
},
onSelect:function(id,text,checked)
{
this.setValue(id,text,checked);
},
CheckPanel:function(el)
{
var checkpanel = new Ext.Panel
({
el:el,
autoScroll:true
});
var multiselectField = this;
if(typeof this.contextArray != 'undefined')
{
for(var i=0;i {
var contArry=this.contextArray[i];
var auto_field=new Ext.form.Checkbox
({
boxLabel:contArry[1],
id:contArry[0],
name:contArry[0],
cls :'x-multiselectfield-list'
});
auto_field.on('check',function(auto_field)
{
multiselectField.onSelect(auto_field.id,auto_field.boxLabel,auto_field.checked);
});
checkpanel.add(auto_field);
}
}
return checkpanel
},
getValue : function()
{
if(typeof this.value != 'undefined')
{
return this.value;
}
else
{
return Ext.form.MultiSelectField.superclass.getValue.call(this);
}
},
setValue : function(id,text,ischecked)
{
var text = text;
var value = id;
var return_text_string;
var return_value_string;

var text_temp = Ext.form.MultiSelectField.superclass.getValue.call(this);
var ids_temp = typeof this.value != 'undefined' ? this.value : '';
var text_arrtemp = text_temp.split(",");
var ID_arrtemp = ids_temp.split(",");
if(ischecked)
{
Array.add(text_arrtemp,text);
Array.add(ID_arrtemp,value);
}
else
{
Array.remove(text_arrtemp,text);
Array.remove(ID_arrtemp,value);
}
return_text_string = text_arrtemp.toString();
return_value_string = ID_arrtemp.toString();
var first_text_str = return_text_string.substr(0,1);
var first_value_str = return_value_string.substr(0,1);
if(first_text_str==",")
{
return_text_string=return_text_string.substr(1);
}
if(first_value_str==",")
{
return_value_string=return_value_string.substr(1);
}
Ext.form.MultiSelectField.superclass.setValue.call(this, return_text_string);
this.value = return_value_string;
if(this.hiddenField)
{
this.hiddenField.value = return_value_string;
}

},
onDestroy : function()
{
if(this.list)
{
this.list.destroy();
}
Ext.form.MultiSelectField.superclass.onDestroy.call(this);
},
collapseIf : function(e)
{
if(!e.within(this.wrap) && !e.within(this.list))
{
this.collapse();
}
},
expand : function()
{
if(this.isExpanded() || !this.hasFocus)
{
return;
}
this.list.alignTo(this.wrap, this.listAlign);
this.list.show();
Ext.getDoc().on('mousewheel', this.collapseIf, this);
Ext.getDoc().on('mousedown', this.collapseIf, this);
this.fireEvent('expand', this);
},
collapse : function()
{
if(!this.isExpanded())
{
return;
}
this.list.hide();
Ext.getDoc().un('mousewheel', this.collapseIf, this);
Ext.getDoc().un('mousedown', this.collapseIf, this);
this.fireEvent('collapse', this);
},
isExpanded : function()
{
return this.list && this.list.isVisible();
},
onTriggerClick : function()
{
if(this.disabled)
{
return;
}
if(this.isExpanded())
{
this.collapse();
}
else
{
this.onFocus({});
this.expand();
}
this.el.focus();
}
});
Ext.reg('multiselectfield', Ext.form.MultiSelectField);