View Full Version : How to 'check' all checkboxes in the list to 'check' the single checkbox?

8 May 2012, 11:32 PM
Hello friends, I am stuck at a situation in which i have to 'check' all the checkboxes present in the list by 'checking' a checkbox situated in toolbar.

Here's code to create checkbox list:-

itemTpl: '<input type="checkbox" name="box" enabled="enabled" value="open" name="comment_status" id="status" <tpl if="active">checked="checked"</tpl> /> {groupName}{#}',

Here's my checkbox code:-

var checkBox = {
xtype: 'checkboxfield',
name : 'all',
// label: 'All',
itemId: 'all',
value: 'all',
lableWidth: "0",
width: 1,
padding: '0 0 15 30',
checked: false,
listeners: {
check:function() {
// alert("check");

item = Ext.get("status");

chkBox = item.down('input').dom;

var checkboxes = Ext.getStore('group');

for(var i=0;i<checkboxes.getCount();i++){
chkBox.checked = true;

// alert("uncheck");

On the above checkbox check , I want that all the checkboxes defined in "itemTpl" will be checked and vice versa .I know my code inside the check : function(){} is no that good that solve my problem(Both the codes in different views).

So, please advise me some solution of this problem.

Thanx in advance.

9 May 2012, 1:55 PM

I think there's 2 ways to handle this.

1. What you really want to do I'm assuming is to change the stored data so that all of your statuses are active, right?
To do this, change check:function to be

record.set('active', true);
This should cause the dataview to be regenerated and all of the checkboxes will be checked.

2. The other way is somewhat like what you are doing, however, it would appear that you are retrieving the first chkBox and repeatedly checking it instead of iterating through the set of checkboxes.

var items= Ext.DomQuery.query("input[name='comment_status']");//gets an array of all status checkboxes. You can't really use the id attribute because you can't have multiple elements with the same id so your id='status' in the itemTpl is probably causing some problems. You also have 2 name attributes on the checkbox (box and comment_status) so this may not work until you get rid of the box name attribute.

Ext.each(items, function(item){

That should do it. (or be pretty close anyway).


9 May 2012, 8:45 PM
Thanx a ton buddy u solved my problem.

30 May 2012, 10:13 AM
HI himanshu

Me too looking for the same, can you please share you code. It will great help for me .

Thanks in advance !!!

22 Jan 2015, 5:17 AM
I have a problem : I want to display a check box on each list item, i when i press one of the list that value should be stored of whether how many checkboxes have been selected.
Depending upon that value of checkbox i need to display a collection of views in a panel stating which list i have selected. can some body plz help with my code. here are my fil what i have succedded with:

Ext.define('sencha.view.list view',{
extend: 'Ext.Container',




xtype: 'list',
scrollable: true,
height: '100%',
itemTpl: '{name}',
data: [
{name: "Axis Bank"},
{name: "Canara Bank"},
{name: "IDBI Bank"},
{name: "State Bank"},
{name: "Maharashrta Bank"},
{name: "Item 6"},
{name: "Item 7"},
{name: "Item 8"},
{name: "Item 9"},
{name: "Item 9"},
{name: "Item 10"},
{name: "Item 11"},
{name: "Item 12"},
{name: "Item 13"},
{name: "Item 14"},
{name: "Item 15"},
{name: "Item 16"},
{name: "Item 17"},
{name: "Item 18"},
{name: "Item 19"},
{name: "Item 20"},
xtype: 'toolbar',
itemId: 'topToolbar',
docked: 'top',

xtype: 'button',
text: '+/-',
iconMask: true,
itemId: 'second',
text: 'go Back',

//width : 200,
//height : 200,
//centered : true,
handler: function() {

//hideOnMaskTap: true,