How to 'check' all checkboxes in the list to 'check' the single checkbox?

Question

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");
                      console.log("item:-"+Ext.JSON.encode(item));

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

                      var checkboxes = Ext.getStore('group');
                      console.log(checkboxes.getCount());

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

                  },
                  uncheck:function(){
                     // 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.

Answer 1

Ok, I updated your senchafiddle to make it work. In substance, here is what I added to your code :

Add 2 functions to your list Controller, to manage actions on the checkbox in the toolbar :

checkAll:function(){
    this.getCheckboxList().getStore().each(function(record){record.set('active', true);});
},
uncheckAll:function(){
    this.getCheckboxList().getStore().each(function(record){record.set('active', false);});
}

And add the toolbar with the checkbox to rule them all (XD) above your list :

   {
       xtype : 'toolbar',
       docked: 'top',
       title: 'Check !',
       items:[{
           xtype: 'checkboxfield',
           name : 'all',
           value: 'checkAll',
           listeners:{
               check:function(){
                   MyApp.app.getController('MainViewController').checkAll();
               },
               uncheck:function(){
                   MyApp.app.getController('MainViewController').uncheckAll();
               }
           }
       }]
   }

This will need some css on your part to make the ckeckbox nice, but the behaviour is here.