[英]How to Only Check All Other Checkboxes From another Checkbox in a Group Chechbox
[英]How to check all the checkboxes in checkbox group in extjs?
我有一个复选框组,其中包含多个复选框。 我想在单击按钮时检查所有这些。 这些复选框是动态创建的。
var json = result.responseText;
var temp = JSON.parse(json);
for(var i=0;i<Object.keys(temp[newValue]).length;i++){
menuArray.push({
xtype: 'checkboxfield',
boxLabel: (temp[newValue][i]).split("_").join(" "),
name: temp[newValue][i],
id:temp[newValue][i],
inputValue: 'true',
uncheckedValue: 'false',
formBind: false
});
}
checkboxGroup = new Ext.form.CheckboxGroup({
xtype: 'checkboxgroup',
fieldLabel: '',
id:'moduleCheckboxGroup',
columns: 1,
items: menuArray
});
permissionPanel.removeAll();
permissionPanel.add(checkboxGroup);
提前致谢!
您可以使用“查询”方法通过“ isCheckbox”搜索子项。
Ext.create('Ext.form.CheckboxGroup', {
renderTo: Ext.getBody(),
id: 'mycheckboxgroup',
columns: 1,
items: [{
xtype: 'checkboxfield',
boxLabel: 'Test1',
name: 'test1',
inputValue: 'true',
uncheckedValue: 'false',
formBind: false
}, {
xtype: 'checkboxfield',
boxLabel: 'Test2',
name: 'test2',
inputValue: 'true',
uncheckedValue: 'false',
formBind: false
}, {
xtype: 'checkboxfield',
boxLabel: 'Test3',
name: 'test3',
inputValue: 'true',
uncheckedValue: 'false',
formBind: false
}]
});
Ext.create('Ext.Button', {
renderTo: Ext.getBody(),
text: 'Check all',
handler: function () {
var checkboxes = Ext.getCmp('mycheckboxgroup').query('[isCheckbox]');
Ext.Array.each(checkboxes, function (checkbox) {
checkbox.setValue(1);
});
}
});
我将创建一个按钮,其中包含对复选框组的引用,然后存储状态以在单击时切换选择和取消选择。 这是下面代码的现场演示 。
var group = Ext.create('App.DynamicCheckboxGroup', {
id: 'mycheckboxgroup',
count : 9,
columns : 3,
width: 180,
renderTo: Ext.getBody()
});
Ext.create('App.CheckboxGroupButton', {
checkboxGroup: group,
renderTo: Ext.getBody()
});
Ext.define('App.DynamicCheckboxGroup', {
extend : 'Ext.form.CheckboxGroup',
config : {
count : 3
},
initComponent : function() {
var me = this;
var items = [];
for (var i = 1; i <= me.count; i++) {
items.push({
xtype: 'checkbox',
boxLabel: 'Test' + i,
name: 'test' + i,
inputValue: 'true',
uncheckedValue: 'false',
formBind: false
});
}
me.items = items;
me.callParent(arguments);
}
});
Ext.define('App.CheckboxGroupButton', {
extend: 'Ext.Button',
config : {
checkboxGroup : null,
states : [{
text : 'Deselect All',
value : 1
}, {
text: 'Select All',
value : 0
}]
},
initComponent : function() {
var me = this;
me.setText(me.states[1].text);
me.callParent(arguments);
},
handler : function (button, e) {
var me = this;
var newState = me.states.reduce(function(result, state) {
return state.text !== button.getText() ? state : result;
}, {});
Ext.Array.each(me.checkboxGroup.getBoxes(), function (checkbox) {
checkbox.setValue(newState.value);
});
button.setText(newState.text);
}
});
在ExtJS 4.x中,有一个Eldono解决方案的快捷方式:
var checkBoxes = checkboxGroup.getBoxes()
Sencha文档: Ext.form.CheckboxGroupView.getBoxes
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.