Extjs4 Adding a checkbox column to a grid

Posted on by

You may have seen the ux that was written to add a checkbox column to the extjs3 grid, and noted the fact that it still works in extjs4, however, before cutting and pasting the code take a look at how easily the column is handled in version 4.
To get started you will first need to add a selection model using the code below above the grid and using the ExtJs checkboxselectionmodel .

Notice that checkOnly has been set to true, I found that without this you would have a checkbox with a selection type multi, which is the default, is the user clicks on a row it deselects all of the checkboxes and selects that rows checkbox.

var sm = Ext.create('Ext.selection.CheckboxModel',{
	checkOnly:true	
});

Next add the checkbox model to your grid by specifying it in the selModel configuration option of the grid panel like this:

    selModel:sm

The last part of the equation is doing something with the checked rows, I use this type of column for order grids where the user can select multiple line items then click a button and order the items. The code below is code for a button that can be placed in the toolbar of the grid that you are attaching the checkbox to. Since the rows are passed in an array you will want to parse out the actual information that you would like to send to the server side using javascript, I have used Ext.each array method to loop through the array and grab the value of the primary key that is in the data store attached to the grid. I am adding a comma after every key as I will import this into a cflist on the server side. You may have noticed this line: ids = ids.slice(0,-1); in the code below, what this does is uses a function from the ext string object configured in a way that it removes the last character from the string, which in this case is a trailing comma. 

{
xtype:'button',
text:'<b>Order Checked Items</b>',
iconCls:'shopping_cart',
scale:'large',
    handler :function() {
	var ids = '';
	Ext.each(your_grid.getSelectionModel().getSelection(), function(row, index, value) {
	ids = ids + row.data.primary_key + ',';
	});
// Remove the last character from a string
	ids = ids.slice(0,-1);
// Do something with the row keys
	Ext.Ajax.request({
	url: 'some_url.php',
		params:{'orders':ids},
		success: function(action){
		// Load Order Grid
		Your_grid.getStore().load();
			   
	},
failure: function(action){						
  Ext.Msg.show({
     title:'Uh-Oh!',
     msg: 'Something prevented the database from updating the tables that hold data for this application, please try again!'});
	}  
	});	
	}
}

5 thoughts on “Extjs4 Adding a checkbox column to a grid”

  1. Hello! TY for this! But I have 2 problems…
    First, the checkbox column disappears if I close my window and click the link again to open it (it’s a pop up window).
    Second, I get an error when trying to retrieve the selection :
    Cannot call method ‘getSelectionModel’ of undefined

    I’m lost. Can you help me please? TY

    Regards,

    Ana

      • Sorry….
        Here is the code with the button which is supposed to handle the selected rows :
        //it’s a pop up window that opens when a link is clicked in the main window (grid)
        if (modalConfig.key == ‘series-vehicule’)
        {
        dockedItems[1].items.push([Ext.create('Ext.Action', {
        text: 'Validation groupée',
        handler: function (itemset) {
        //traitement des cases à cocher
        var s = this.getSelectionModel().getSelection();
        selected = [];
        Ext.each(s, function () {
        Ext.Ajax.request({
        url: action_validate_url,
        method: ‘post’,
        params: window.ratp.utils.getRowInfos(record.data, window.ratp.utils.defaultRowInfos),
        success: function(response){
        mainStore.load();
        },
        failure: function(response){
        Ext.Msg.show({
        title: ‘Erreur’,
        msg: ‘Une erreur est survenue, merci de réessayer’,
        icon: Ext.MessageBox.ERROR,
        buttons: Ext.Msg.OK
        });
        }
        });
        });
        }(modalStore)
        })]
        );
        }

        This is the column:
        //checkbox column
        var checkbox = Ext.create(‘Ext.selection.CheckboxModel’);

        This is the pop up window:
        window.ratp.modal.models = {
        seriesVehicule: {
        key: ‘series-vehicule’,
        title: ‘Toutes les séries pour un modèle donné’,
        url: ‘series-vehicule’,
        width: 1170,
        fields: window.ratp.fields.seriesVehicule,
        columns: window.ratp.columns.seriesVehicule,
        filters: window.ratp.filters.seriesVehicule,
        selModel: checkbox,
        },

        This is the error:
        Uncaught TypeError: Object [object Object] has no method ‘getSelectionModel’

        Thank you for your help!

      • Ana,

        this is not referring to your grid, please replace it with the reference to the grid object like:

        your_grid.getSelectionModel().getSelection()

        It’s likely a scope thing.

        - Josh

  2. Thank you it works! But I have a little problem… I click the link, the window opens, I have my checkbox column, I select items, I do my thing with them. Everything works fine. I close the window. Then when I click the second link (or third or whatever) to open another window (the same but with different data), my checkbox column has disappeared. I have Extjs version 4.0.7. Do you have any idea where it comes from? I’ve searched but nobody found the solution… (The code is the same as above, corrected of course) Thank you for your help! I’m going bald on this…

Leave a Reply