2、CheckCombo.js：
Ext.define('Ext.ux.CheckCombo',{
extend: 'Ext.form.field.ComboBox',
alias: 'widget.checkcombo',
multiSelect: true,
allSelector: false,
addAllSelector: false,
allText: 'All',
createPicker: function() {
var me = this,
picker,
menuCls = Ext.baseCSSPrefix + 'menu',
opts = Ext.apply({
pickerField: me,
selModel: {
mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
},
floating: true,
hidden: true,
ownerCt: me.ownerCt,
cls: me.el.up('.' + menuCls) ? menuCls : '',
store: me.store,
displayField: me.displayField,
focusOnToFront: false,
pageSize: me.pageSize,
tpl:
[
'<ul><tpl for=".">',
'<li role="option" class="' + Ext.baseCSSPrefix + 'boundlist-item"><span class="x-combo-checker"> </span> {' + me.displayField + '}</li>',
'</tpl></ul>'
]
}, me.listConfig, me.defaultListConfig);
picker = me.picker = Ext.create('Ext.view.BoundList', opts);
if (me.pageSize) {
picker.pagingToolbar.on('beforechange', me.onPageChange, me);
}
me.mon(picker, {
itemclick: me.onItemClick,
refresh: me.onListRefresh,
scope: me
});
me.mon(picker.getSelectionModel(), {
'beforeselect': me.onBeforeSelect,
'beforedeselect': me.onBeforeDeselect,
'selectionchange': me.onListSelectionChange,
scope: me
});
return picker;
},
getValue: function()
{
return this.value.join(',');
},
getSubmitValue: function()
{
return this.getValue();
},
expand: function()
{
var me = this,
bodyEl, picker, collapseIf;
if (me.rendered && !me.isExpanded && !me.isDestroyed) {
bodyEl = me.bodyEl;
picker = me.getPicker();
collapseIf = me.collapseIf;
//显示
picker.show();
me.isExpanded = true;
me.alignPicker();
bodyEl.addCls(me.openCls);
if(me.addAllSelector == true && me.allSelector == false)
{
me.allSelector = picker.getEl().insertHtml('afterBegin', '<div class="x-boundlist-item" role="option"><span class="x-combo-checker"> </span> '+me.allText+'</div>', true);
me.allSelector.on('click', function(e)
{
if(me.allSelector.hasCls('x-boundlist-selected'))
{
me.allSelector.removeCls('x-boundlist-selected');
me.setValue('');
me.fireEvent('select', me, []);
}
else
{
var records = [];
me.store.each(function(record)
{
records.push(record);
});
me.allSelector.addCls('x-boundlist-selected');
me.select(records);
me.fireEvent('select', me, records);
}
});
}
// 监听
me.mon(Ext.getDoc(), {
mousewheel: collapseIf,
mousedown: collapseIf,
scope: me
});
Ext.EventManager.onWindowResize(me.alignPicker, me);
me.fireEvent('expand', me);
me.onExpand();
}
},
onListSelectionChange: function(list, selectedRecords)
{
var me = this,
isMulti = me.multiSelect,
hasRecords = selectedRecords.length > 0;
if (me.isExpanded) {
if (!isMulti) {
Ext.defer(me.collapse, 1, me);
}
if (isMulti || hasRecords) {
me.setValue(selectedRecords, false);
}
if (hasRecords) {
me.fireEvent('select', me, selectedRecords);
}
me.inputEl.focus();
}
if(me.addAllSelector == true && me.allSelector != false)
{
if(selectedRecords.length == me.store.getTotalCount()) me.allSelector.addCls('x-boundlist-selected');
else me.allSelector.removeCls('x-boundlist-selected');
}
}
});
3、checkbox-combobox.html：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MHZG.NET-extjs4.1带复选框的下拉框</title>
<link rel="stylesheet" type="text/css" href="/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext-all-debug.js"></script>
<script type="text/javascript" src="/locale/ext-lang-zh_CN.js"></script>
<style type="text/css">
body{ padding:10px;}
.x-combo-checker { background-position: 50% -2px; margin-left: 1px; background-color: transparent; background-image: url("/resources/themes/images/default/grid/unchecked.gif"); background-position: -1px -1px; background-repeat: no-repeat; height: 14px; width: 14px; display: inline-block; }
.x-boundlist-selected .x-combo-checker { background-image: url("/resources/themes/images/default/grid/checked.gif"); }
</style>
<script type="text/javascript">
Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux', '/ux');
var store = Ext.create('Ext.data.Store',{
fields: ['id', 'type'],
data: [
{id: '1', type: '选项一 extjs4.1'},
{id: '2', type: '选项二 extjs4'},
{id: '3', type: '选项三 extjs 4.1 下拉复选框'},
{id: '4', type: '选项四 mhzg.net'},
{id: '5', type: '选项五 mhzg extjs4'},
{id: '6', type: '选项六 mhzg.net extjs 4.1'},
{id: '7', type: '选项七 exjts4.x'}
]
});
Ext.onReady(function(){
//没有全选功能的CheckCombo
Ext.create('Ext.ux.CheckCombo',{
renderTo: 'cbo',
width:180,
id:'box1',
valueField: 'id',
displayField: 'type',
store: store
});
//带全选功能的CheckCombo
Ext.create('Ext.ux.CheckCombo',{
renderTo: 'cba',
valueField: 'id',
displayField: 'type',
id:'box2',
width:180,
allText:'全选',//默认字符是All
store: store,
addAllSelector: true
});
})
function getValues(v){
var data = Ext.getCmp(v).getValue();
alert(data);
}
</script>
</head>
extjs 4.1 没有全选功能的下拉复选框<br /><br />
<div id="cbo"></div>
<input type="button" onclick="getValues('box1');" value="获取值" /><br /><br />
-------------------------------------分割线-------------------------------------<br /><br />
extjs 4.1 下拉复选框，并带全选功能<br /><br />
<div id="cba"></div>
<input type="button" onclick="getValues('box2');" value="获取值" />
<body>
</body>
</html>
最后，需要注意的是，无论我们如何组建目录结构，只要我们将目录结构顺序弄明白了，一切都好解决！
源码下载地址:http://pan.baidu.com/s/1zht1s
