Check all checkbox in gridpanel in extjs

Question

I would like to check all of the checkbox made by Ext.grid.CheckColumn in a gridpanel, may I know if there is any easy way to do this? I have try to add class to the checkbox(Ext.grid.CheckColumn) but it seem not work.

Thanks very much!

Solution 1

If you're rendering a store field as a checbox column, you have to set that field to true for all the records in the store.

store.each(function(rec){ rec.set('field', true) })

Never try to change a grid cell's value directly, always change it via the store's corresponding record.

Update: if you have many records, use something like this:

store.suspendEvents(); // avoid view update after each row
store.each(function(rec){ rec.set('field', true) })
store.resumeEvents();
grid.getView().refresh();

Solution 2

<script language="javascript" type="text/javascript">
 var SelectAll = function (value) {
        Store1.data.each(function (record) {
            record.set('IsSelected', value); 
        });
    };
</script>

<ext:Button ID="btnSelectAll" runat="server" Text="Select All" >
      <Listeners>
             <Click Handler="SelectAll(true);" />
      </Listeners>
</ext:Button>

NB: Store1 is the name of the store and IsSelected is the field name as specified in the JsonReader reader

Solution 3

Ext.grid.CheckboxSelectionModel provides a selectAll() method, if this is what you're looking for.

http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.CheckboxSelectionModel

Can you show us some codes? I presume CheckColumn is something that you created?

Comments

[vajrakumar]

Nice answer, I am also following the same method, But I have a case where there are 200 records in each page of grid, in this case it is taking almost 15 - 20 seconds to "selectAll". User is asking let it take time when I do any operation . Why to take that much time just to change in UI? Any help ?

[thvwns]

@JoeriSebrechts your answer helped me alot. thank you very much! :)