ext 实现下拉框中的checkbox

请问个问题：
我想在下拉框中实现checkbox
详细说明：
一般的下拉框是点击后出现一些数据你选择其中的一个，
我现在需要一个是点击下拉框后，显示出来的数据每个前面都有一个checkbox选择框，我可以对下拉框中的数据进行多项选择。

其他：
我查过，使用ext好像可以实现，但是我不会ext也没有找到相关的例子，因为比较急，所以没有太多时间去看ext文档，
希望大家能帮忙解决下。
不使用ext实现也可以。
[b]问题补充：[/b]
我都试验过这些代码，都有异常不能出现正确结果

damoqiongqiu 提供的代码，我测试下，提示null，空对象， 124行

[code="java"]

.ux-lovcombo-icon { width:16px; height:16px; float:left; background-position: -1px -1px ! important; background-repeat:no-repeat ! important; }  .ux-lovcombo-icon-checked { background: transparent url(/plug-in/ext/resources/images/default/menu/checked.gif); } .ux-lovcombo-icon-unchecked { background: transparent url(/plug-in/ext/resources/images/default/menu/unchecked.gif); } // add RegExp.escape if it has not been already added if('function' !== typeof RegExp.escape) { RegExp.escape = function(s) { if('string' !== typeof s) { return s; } // Note: if pasting from forum, precede ]/\ with backslash manually return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1'); }; // eo function escape } // create namespace Ext.ns('Ext.ux.form'); /** * * @class Ext.ux.form.LovCombo * @extends Ext.form.ComboBox */ Ext.ux.form.LovCombo = Ext.extend(Ext.form.ComboBox, { // {{{ // configuration options /** * @cfg {String} checkField name of field used to store checked state. * It is automatically added to existing fields. * Change it only if it collides with your normal field. */ checkField:'checked' /** * @cfg {String} separator separator to use between values and texts */ ,separator:',' /** * @cfg {String/Array} tpl Template for items. * Change it only if you know what you are doing. */ // }}} // {{{ ,initComponent:function() { // template with checkbox if(!this.tpl) { this.tpl = '<tpl for=".">' +'<div class="x-combo-list-item">' +'<img src="' + Ext.BLANK_IMAGE_URL + '" ' +'class="ux-lovcombo-icon ux-lovcombo-icon-' +'{[values.' + this.checkField + '?"checked":"unchecked"' + ']}">' +'<div class="ux-lovcombo-item-text">{' + (this.displayField || 'text' )+ '}</div>' +'</div>' +'</tpl>' ; } // call parent Ext.ux.form.LovCombo.superclass.initComponent.apply(this, arguments); // install internal event handlers this.on({ scope:this ,beforequery:this.onBeforeQuery ,blur:this.onRealBlur }); // remove selection from input field this.onLoad = this.onLoad.createSequence(function() { if(this.el) { var v = this.el.dom.value; this.el.dom.value = ''; this.el.dom.value = v; } }); } // e/o function initComponent // }}} // {{{ /** * Disables default tab key bahavior * @private */ ,initEvents:function() { Ext.ux.form.LovCombo.superclass.initEvents.apply(this, arguments); // disable default tab handling - does no good this.keyNav.tab = false; } // eo function initEvents // }}} // {{{ /** * clears value */ ,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(); } // eo function clearValue // }}} // {{{ /** * @return {String} separator (plus space) separated list of selected displayFields * @private */ ,getCheckedDisplay:function() { var re = new RegExp(this.separator, "g"); return this.getCheckedValue(this.displayField).replace(re, this.separator + ' '); } // eo function getCheckedDisplay // }}} // {{{ /** * @return {String} separator separated list of selected valueFields * @private */ ,getCheckedValue:function(field) { field = field || this.valueField; var c = []; // store may be filtered so get all records 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); } // eo function getCheckedValue // }}} // {{{ /** * beforequery event handler - handles multiple selections * @param {Object} qe query event * @private */ ,onBeforeQuery:function(qe) { qe.query = qe.query.replace(new RegExp(this.getCheckedDisplay() + '[ ' + this.separator + ']*'), ''); } // eo function onBeforeQuery // }}} // {{{ /** * blur event handler - runs only when real blur event is fired */ ,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; // iterate through raw values and records and check/uncheck items 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(); } // eo function onRealBlur // }}} // {{{ /** * Combo's onSelect override * @private * @param {Ext.data.Record} record record that has been selected in the list * @param {Number} index index of selected (clicked) record */ ,onSelect:function(record, index) { if(this.fireEvent('beforeselect', this, record, index) !== false){ // toggle checked field record.set(this.checkField, !record.get(this.checkField)); // display full list if(this.store.isFiltered()) { this.doQuery(this.allQuery); } // set (update) value and fire event this.setValue(this.getCheckedValue()); this.fireEvent('select', this, record, index); } } // eo function onSelect // }}} // {{{ /** * Sets the value of the LovCombo * @param {Mixed} v value */ ,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(); } } // eo function setValue // }}} // {{{ /** * Selects all items */ ,selectAll:function() { this.store.each(function(record){ // toggle checked field record.set(this.checkField, true); }, this); //display full list this.doQuery(this.allQuery); this.setValue(this.getCheckedValue()); } // eo full selectAll // }}} // {{{ /** * Deselects all items. Synonym for clearValue */ ,deselectAll:function() { this.clearValue(); } // eo full deselectAll // }}} }); // eo extend Ext.reg('lovcombo', Ext.ux.form.LovCombo); /*onReady函数的代码在页面加载完后被执行*/ Ext.onReady(function() { /*,renderTo:'lovcomboct' 这里的lovcomboct对应<div id='lovcomboct'></div>的ID值*/ var lc = new Ext.ux.form.LovCombo({ id:'lovcombo' ,renderTo:'lovcomboct' ,width:300 ,hideOnSelect:false ,maxHeight:200 ,readOnly:true ,editable:false ,store:[ [1, 'Personnel []'] ,[11, 'Finance (33)'] ,[5, 'Door'] ,[6, 'Door Panel'] ,[2, 'Management !77'] ,[25, 'Production'] ,[3, 'Users'] ,[20, 'Window'] ,[21, 'Window Panel'] ,[22, 'Form Panel'] ,[23, 'Grid Panel'] ,[24, 'Data View Panel'] ] ,triggerAction:'all' ,mode:'local' }); });

[/code]

可以用lovCombo
[url]http://www.iteye.com/forums/41/search?query=lovCombo[/url]

其实就是input加自定义div,最后通过事件控制div的动作,参考下面的吧。
[code="html"]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

用javascript美化Select

SELECT { WIDTH: 200px; HEIGHT: 20px }

用javascript模拟select达到美化效果

用户注册

帐号

密码

省份江西福建广东浙江

loadSelect(document.f.province);

[/code]

LS是Ext的代码吗？尽瞎扯。看这里：[url]http://www.iteye.com/topic/340900[/url]

拿firebug跟一下看，这是扩展组件，可能测试没做好。

[quote]提示null，空对象， 124行 [/quote]
那是因为
[code="java"],renderTo:'lovcomboct'[/code]
你在你的body里弄个div ='lovcomboct'
如果你看不见checkbox的那个勾选框，你可以看下Ext.ux.form.LovCombo.css
下面是那个勾选框的CSS。。
[code="java"].ux-lovcombo-icon-checked {
background: transparent url(../ext/resources/images/default/menu/checked.gif);
}
.ux-lovcombo-icon-unchecked {
background: transparent url(../ext/resources/images/default/menu/unchecked.gif);
}[/code]
下面是完整代码，EXT及LOVCOMBO的路径改成你自己的就OK了。。
[code="java"]

Ext.onReady(function() { var lc = new Ext.ux.form.LovCombo({ id:'lovcombo' ,renderTo:'lovcomboct' ,width:300 ,hideOnSelect:false ,maxHeight:200 ,readOnly:true ,editable:false ,store:[ [1, 'Personnel []'] ,[11, 'Finance (33)'] ,[5, 'Door'] ,[6, 'Door Panel'] ,[2, 'Management !77'] ,[25, 'Production'] ,[3, 'Users'] ,[20, 'Window'] ,[21, 'Window Panel'] ,[22, 'Form Panel'] ,[23, 'Grid Panel'] ,[24, 'Data View Panel'] ] ,mode:'local' }); });

[/code]

lovCombo插件就可以解决啊。

楼上正解，用lovcombox就可以解决。
{
xtype : 'lovcombo',
name : 'myWork.queryStyleName',
id : 'myWorkQueryStyleName',
hideLabel : true,
emptyText : '请选择',
width : 125,
readOnly : true,
triggerAction : 'all',
valueField : 'id',
displayField : 'name',
mode : 'local',
store : new Ext.data.SimpleStore({
fields : ['id', 'name'],
data : [['-1', '请选择'], ['2', 'xxxx'],
['6', 'aaa'], ['4', 'bbbb']]
}),
selectOnFocus : true
}

楼主把这段代码，放在某个容器中，可以得到带checkbox的下拉框。
{
xtype : 'lovcombo',
name : 'myWork.queryStyleName',
id : 'myWorkQueryStyleName',
hideLabel : true,
emptyText : '请选择',
width : 125,
readOnly : true,
triggerAction : 'all',
valueField : 'id',
displayField : 'name',
mode : 'local',
store : new Ext.data.SimpleStore({
fields : ['id', 'name'],
data : [['-1', 'xxxx], ['2', 'aaaa'],
['6', 'bbbb], ['4', 'ccccc]]
}),
selectOnFocus : true
}