在ExtJS 4.0 Combobox中选择所有 [英] Select all in ExtJS 4.0 Combobox
本文介绍了在ExtJS 4.0 Combobox中选择所有的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个ExtJS Combobox，并且要求有一个额外的值，用户可以从第一个值中选择所有的选项，如：
Ext.onReady（function（）{
//包含状态列表的数据存储区
var states = Ext.create（'Ext.data.Store'，{
fields：['abbreviation'，'name']，
data：[{
name：'Select all'，
abbreviation：'ALL'
}，
{
name：'ALABAMA'，
缩写：'AL'
}，{
名称：'ALASKA'，
缩写：'AK'
}，{
name：'AMERICAN SAMOA'，
缩写：'AS'
}，{
name：'ARIZONA'，
缩写：'AZ '
}，{
name：'ARKANSAS'，
缩写：'AR'
}，{
name：'CALIFORNIA'，
缩写： 'CA'
}，{
name：'COLORADO'，
缩写：'CO'
}，{
name：'CONNECTICUT'，
缩写：'CT'
}，{
name：'DELAWARE'，
缩写：'DE'
}，{
name：'DISTRICT OF COLUMBIA'
缩写：'DC'
}，{
name：'MICRONESIA'FEDERATED STATES，
缩写：'FM'
}，{
name ：'FLORIDA'，
缩写：'FL'
}，{
name：'GEORGIA'，
缩写：'GA'
}，{
name：'GUAM'，
缩写：'GU'
}，{
name：'HAWAII'，
缩写：'HI'
}，{
name：'IDAHO'，
缩写：'ID'
}，{
name：'ILLINOIS'，
缩写：'IL'
} {
name：'INDIANA'，
缩写：'IN'
}，{
name：'IOWA'，
缩写：'IA'
}，{
name：'KANSAS'，
缩写：'KS'
}，{
name：'KENTUCKY'，
缩写：'KY'
}，{
name：'LOUISIANA'，
缩写：'LA'
}，{
name：'MAINE'，
缩写：'ME'
}，{
name：'MARSHALL ISLANDS'，
缩写：'MH'
}，{
name：'MARYLAND'，
缩写： 'MD'
}，{
name：'MASSACHUSETTS'，
abbreviation：'MA'
}，{
name：'MICHIGAN'，
缩写：'MI'
}，{
name：'MINNESOTA'，
缩写：'MN'
}，{
name：'MISSISSIPPI'，
缩写：'MS'
}，{
name：'MISSOURI'，
缩写：'MO'
}，{
name：'MONTANA'
缩写：'MT'
}，{
name：'NEBRASKA'，
缩写：'NE'
}，{
name：'NEVADA '，
缩写：'NV'
}，{
name：'NEW HAMPSHIRE'，
缩写：'NH'
}，{
name ：'NEW JERSEY'，
缩写：'NJ'
}，{
name：'NEW MEXICO'，
缩写：'NM'
}，{
name：'NEW YORK'，
缩写：'NY'
}，{
name：'NORTH CAROLINA'，
缩写：'NC'
}，{
name：'NORTH DAKOTA'，
abbreviation：'ND'
}，{
name：'NORTHERN MARIANA ISLANDS'，
缩写：'MP '
}，{
name：'OHIO'，
缩写：'OH'
}，{
name：'OKLAHOMA'，
缩写： 'OK'
}，{
name：'OREGON'，
abbreviation：'OR'
}，{
name：'PALAU'，
缩写：'PW'
}，{
name：'PENNSYLVANIA'，
缩写：'PA'
}，{
name：'PUERTO RICO'，
缩写：'PR'
}，{
name：'RHODE ISLAND'，
缩写：'RI'
}，{
name：'SOUTH CAROLINA'，
缩写：'SC'
}，{
name：'SOUTH DAKOTA'，
缩写：'SD'
}，{
name：'TENNESSEE'，
abbreviation：'TN'
}，{
name：'TEXAS'，
abbreviation：'TX'
}，{
name：'UTAH'，
缩写：'UT'
}，{
name：'VERMONT'，
缩写：'VT'
}
name：'VIRGIN ISLANDS'，
缩写：'VI'
}，{
name：'VIRGINIA'，
缩写：'VA'
}，{
name：'WASHINGTON'，
缩写：'WA'
}，{
name：'WEST VIRGINIA'，
缩写：'WV'
}，{
name：'WISCONSIN'，
abbreviation：'WI'
}，{
name：'WYOMING'，
abbreviation：'WY '
}]
}）;
Ext.define（'comboSelectedCount'，{
alias：'plugin.selectedCount'，
init：function（combo）{
var fl = combo.getFieldLabel（）;
combo.on（{
select：function（me，records）{
var len = records.length，
store = combo.getStore（）;
//切换所有选择
Ext.each（记录，函数（obj，i，recordsItself）{
if i] .data.abbreviation ==='ALL'）{
len = store.getCount（）;
combo.select（store.getRange（））;
}
};
me.setFieldLabel（fl +'（'+ len +'selected）'）;
}，
beforedeselect：function（me，record，index）{
me.setFieldLabel（fl）;
}
}）
}
}）;
//创建组合框，附加到状态数据存储
Ext.create（'Ext.form.ComboBox'，{
disabled：false，
plugins：['selectedCount']，
fieldLabel：'Choose State'，
labelAlign：'top'，
store：states，
queryMode：'local'，
editable：false，
displayField：'name'，
valueField：'abbreviation'，
renderTo：Ext.getBody（），
multiSelect：true，
maxSelections ：3，
width：400，
displayTpl：'< tpl for =。>'+
'{name}'+
' xindex< xcount>，< / tpl>'+
'< / tpl>'，
listConfig：{
itemTpl：'{name}< div class = chkbox>< / div>''
}，
listeners：{
}
}
}）;
我想要能够取消选择所有当用户取消选中全选
不能真正了解如何做到这一点吗？
JSFiddle这里： http://jsfiddle.net/dFEsc/1/
解决方案
我想在组合的存储中添加一个选择所有项是一个坏主意 - 插件变得依赖于商店中的数据。
最好将其添加到下拉列表并编辑插件，添加触发器：
afterrender：function （）{
combo.container.on（{
click：function（e）{
var el = e.getTarget（'div'，3，true）;
if （el.getAttribute（'action'）=='select-all'）{
if（！allSelected）{
combo.select（combo.getStore（）。getRange（））;
combo.setSelectedCount（combo.getStore（）。getRange（）。length）;
el.setHTML（'Deselect all ...'）;
allSelected = true;
} else {
combo.reset（）;
el.setHTML（'Select all ...'）;
allSelected = false;
}
}
}
}）
}
Ext.each
查看完整示例 jsfiddle
<我还认为添加一个tpl字段也更好，使一个插件，它被添加到任何组合框添加插件。
在插件的init 'function：
Ext.apply（combo，{
listConfig：{
tpl：new Ext。 XTemplate（
'< div action =select-allclass =sel-all>全选...< / div>< tpl for =。 =x-boundlist-item> {name}< div class =chkbox>< / div>< / div>< / tpl>'
）
}
}）;
然后不必在每个组合框中描述listConfig。
jsfiddle的链接已更新。
Update2：
，其中包含工具栏： http://jsfiddle.net/dFEsc/16/
I have an ExtJS Combobox and the requirement is to have an additional value where the user can select all the options from the first value like so:
Ext.onReady(function () {
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbreviation', 'name'],
data: [{
name: 'Select all',
abbreviation: 'ALL'
},
{
name: 'ALABAMA',
abbreviation: 'AL'
}, {
name: 'ALASKA',
abbreviation: 'AK'
}, {
name: 'AMERICAN SAMOA',
abbreviation: 'AS'
}, {
name: 'ARIZONA',
abbreviation: 'AZ'
}, {
name: 'ARKANSAS',
abbreviation: 'AR'
}, {
name: 'CALIFORNIA',
abbreviation: 'CA'
}, {
name: 'COLORADO',
abbreviation: 'CO'
}, {
name: 'CONNECTICUT',
abbreviation: 'CT'
}, {
name: 'DELAWARE',
abbreviation: 'DE'
}, {
name: 'DISTRICT OF COLUMBIA',
abbreviation: 'DC'
}, {
name: 'FEDERATED STATES OF MICRONESIA',
abbreviation: 'FM'
}, {
name: 'FLORIDA',
abbreviation: 'FL'
}, {
name: 'GEORGIA',
abbreviation: 'GA'
}, {
name: 'GUAM',
abbreviation: 'GU'
}, {
name: 'HAWAII',
abbreviation: 'HI'
}, {
name: 'IDAHO',
abbreviation: 'ID'
}, {
name: 'ILLINOIS',
abbreviation: 'IL'
}, {
name: 'INDIANA',
abbreviation: 'IN'
}, {
name: 'IOWA',
abbreviation: 'IA'
}, {
name: 'KANSAS',
abbreviation: 'KS'
}, {
name: 'KENTUCKY',
abbreviation: 'KY'
}, {
name: 'LOUISIANA',
abbreviation: 'LA'
}, {
name: 'MAINE',
abbreviation: 'ME'
}, {
name: 'MARSHALL ISLANDS',
abbreviation: 'MH'
}, {
name: 'MARYLAND',
abbreviation: 'MD'
}, {
name: 'MASSACHUSETTS',
abbreviation: 'MA'
}, {
name: 'MICHIGAN',
abbreviation: 'MI'
}, {
name: 'MINNESOTA',
abbreviation: 'MN'
}, {
name: 'MISSISSIPPI',
abbreviation: 'MS'
}, {
name: 'MISSOURI',
abbreviation: 'MO'
}, {
name: 'MONTANA',
abbreviation: 'MT'
}, {
name: 'NEBRASKA',
abbreviation: 'NE'
}, {
name: 'NEVADA',
abbreviation: 'NV'
}, {
name: 'NEW HAMPSHIRE',
abbreviation: 'NH'
}, {
name: 'NEW JERSEY',
abbreviation: 'NJ'
}, {
name: 'NEW MEXICO',
abbreviation: 'NM'
}, {
name: 'NEW YORK',
abbreviation: 'NY'
}, {
name: 'NORTH CAROLINA',
abbreviation: 'NC'
}, {
name: 'NORTH DAKOTA',
abbreviation: 'ND'
}, {
name: 'NORTHERN MARIANA ISLANDS',
abbreviation: 'MP'
}, {
name: 'OHIO',
abbreviation: 'OH'
}, {
name: 'OKLAHOMA',
abbreviation: 'OK'
}, {
name: 'OREGON',
abbreviation: 'OR'
}, {
name: 'PALAU',
abbreviation: 'PW'
}, {
name: 'PENNSYLVANIA',
abbreviation: 'PA'
}, {
name: 'PUERTO RICO',
abbreviation: 'PR'
}, {
name: 'RHODE ISLAND',
abbreviation: 'RI'
}, {
name: 'SOUTH CAROLINA',
abbreviation: 'SC'
}, {
name: 'SOUTH DAKOTA',
abbreviation: 'SD'
}, {
name: 'TENNESSEE',
abbreviation: 'TN'
}, {
name: 'TEXAS',
abbreviation: 'TX'
}, {
name: 'UTAH',
abbreviation: 'UT'
}, {
name: 'VERMONT',
abbreviation: 'VT'
}, {
name: 'VIRGIN ISLANDS',
abbreviation: 'VI'
}, {
name: 'VIRGINIA',
abbreviation: 'VA'
}, {
name: 'WASHINGTON',
abbreviation: 'WA'
}, {
name: 'WEST VIRGINIA',
abbreviation: 'WV'
}, {
name: 'WISCONSIN',
abbreviation: 'WI'
}, {
name: 'WYOMING',
abbreviation: 'WY'
}]
});
Ext.define('comboSelectedCount', {
alias: 'plugin.selectedCount',
init: function (combo) {
var fl = combo.getFieldLabel();
combo.on({
select: function (me, records) {
var len = records.length,
store = combo.getStore();
// toggle all selections
Ext.each(records, function (obj, i, recordsItself) {
if (records[i].data.abbreviation === 'ALL') {
len = store.getCount();
combo.select(store.getRange());
}
});
me.setFieldLabel(fl + ' (' + len + ' selected)');
},
beforedeselect: function (me, record, index) {
me.setFieldLabel(fl);
}
})
}
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
disabled: false,
plugins: ['selectedCount'],
fieldLabel: 'Choose State',
labelAlign: 'top',
store: states,
queryMode: 'local',
editable: false,
displayField: 'name',
valueField: 'abbreviation',
renderTo: Ext.getBody(),
multiSelect: true,
maxSelections: 3,
width: 400,
displayTpl: '<tpl for=".">' +
'{name}' +
'<tpl if="xindex < xcount">, </tpl>' +
'</tpl>',
listConfig: {
itemTpl: '{name} <div class="chkbox"></div>'
},
listeners: {
}
});
});
I want to be able to de-select all when the user either un-checks 'Select all' or selects any other item but 'Select all'.
Can't really figure out how to do this?
JSFiddle here: http://jsfiddle.net/dFEsc/1/
解决方案
I think to add a "select all" item in store of combo is a bad idea - plugin becomes dependent on the data in the Store. It is better to add it to the dropdown list and edit the plugin, add the trigger:
afterrender: function () {
combo.container.on({
click: function(e) {
var el = e.getTarget('div', 3, true);
if(el.getAttribute('action') == 'select-all') {
if( ! allSelected) {
combo.select(combo.getStore().getRange());
combo.setSelectedCount(combo.getStore().getRange().length);
el.setHTML('Deselect all...');
allSelected = true;
}else{
combo.reset();
el.setHTML('Select all...');
allSelected = false;
}
}
}
})
}
Ext.each(records ... - it is all nonsense ...
See full example on jsfiddle
Update:
I also think that adding a tpl to the field is also better to make a plugin for it to be added to any combo box to add the plugin.
In plugin 'init' function:
Ext.apply(combo, {
listConfig: {
tpl : new Ext.XTemplate(
'<div action="select-all" class="sel-all">Select all...</div><tpl for="."><div class="x-boundlist-item">{name} <div class="chkbox"></div></div></tpl>'
)
}
});
Then not have to describe listConfig each combobox. Link on jsfiddle updated too.
Update2:
Variant with toolbar: http://jsfiddle.net/dFEsc/16/
这篇关于在ExtJS 4.0 Combobox中选择所有的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
