checkboxselection model disable some checkboxes

[miihiir]

Hi,


I am a newbie at extjs. I have a checkboxselectionmodel that I am using with grouping grid.

I would like to disable some of the checkboxes based on the parameters in that row of the grid.

I saw on this forum that it can be achieved using renderer but I am not sure how to use it.

Below is my code -

var xg = Ext.grid;
    
    dealRecordObj = Ext.data.Record.create([
                    {name: 'grp', mapping: 'grp', sortDir: 'ASC', sortType: 'asUCString', type: 'string'},
                    {name: 'id', type: 'string'},
                    {name: 'name', type: 'string'},
                    {name: 'status', type: 'string'},
                    {name: 'start', type: 'string'},
                    {name: 'l_name', type: 'string'},
                    {name: 'f_name', type: 'string'}
                    ]);
                    
    dealReader = new Ext.data.JsonReader({
                    root: 'results',
                    totalProperty: 'total',
                    id: 'id'
                  },
                  dealRecordObj
                );
      
    dealsDataStore = new Ext.data.GroupingStore({
                            proxy: new Ext.data.HttpProxy({
                                url: 'database.php', 
                                method: 'POST'
                            }),
                            baseParams:{task: "LISTING"}, // this parameter is passed for any HTTP request
                            reader: dealReader,
                            sortInfo:{field: 'name', direction: "ASC"},
                            groupField:'grp'
                        });
    
    dealsDataStore.load();
    
    ////////////////////////////////////////////////////////////////////////////////////////
    // Grid 1
    ////////////////////////////////////////////////////////////////////////////////////////
    // row expander
    var expander = new xg.RowExpander({
        tpl : new Ext.Template(
            '<P class="margin">',
            '<b>Deal Name:</b> {name}<br>',
            '<b>Deal Status:</b> {status}',
            '</P>'
        )
    });
    
    var sm = new xg.CheckboxSelectionModel();
            
    var grid1 = new Ext.grid.GridPanel({
        store: dealsDataStore,
        columns: [
            sm,
            expander,
            {id:'grp',header: "Group", hidden: true, dataIndex: 'grp', renderer: renderGroup},
            {header: "Id", width: 60, sortable: true, dataIndex: 'id'},
            {header: "Deal Name", width: 300, sortable: true, dataIndex: 'name'},
            {header: "Last Name", width: 80, sortable: true, dataIndex: 'l_name'},
            {header: "First Name", width: 80, sortable: true, dataIndex: 'f_name'},
            {header: "Taken", width: 80, sortable: true, dataIndex: 'start'}
        ],
    
        view: new Ext.grid.GroupingView({
            forceFit:true,
            startCollapsed:true,
            groupTextTpl: '{group} ({[values.rs.length]} {[values.rs.length > 1 ? "Deals" : "Deal"]})'
        }),
        
        buttons: [{    text: 'Assign',
                    handler: function() {                
                                // check form value                 
                                assignDeals(dealsDataStore, grid1);
                            }        
                    },
                    {    text: 'Clear',            
                        handler: function(){sm.clearSelections();}        
                        }
                ],
        
        sm:sm,
        plugins:expander,
        width: 800,
        height: 500,
        collapsible: false,
        animCollapse: false,
        frame:true,
        title: 'Deal Modeling Queue',
        iconCls: 'icon-grid',
        renderTo: document.body
    });

Any example would be greatly appreciated.

Thanks.

[Animal]

You'll have to add a click handler (See docs and Learn page) and cancel the event if you don't want it to continue.

[miihiir]

Animal,

Thanks a lot for replying.

You'll have to add a click handler (See docs and Learn page) and cancel the event if you don't want it to continue.

where do I do this? in grid or while creating sm?

do you have any example that may be useful?

[Animal]

In the Grid, add a click listener. In the handler, it it's in a cell that you don't want to handle clicks, stop the event. read the docs, adding a listebner is easy./

[miihiir]

You'll have to add a click handler (See docs and Learn page) and cancel the event if you don't want it to continue.

In the Grid, add a click listener. In the handler, it it's in a cell that you don't want to handle clicks, stop the event. read the docs, adding a listebner is easy./

I did this -

listeners: { // add a cellclick listener to the grid
            cellclick: function(grid, row, cell, e) {
                            var rec = grid.getStore().getAt(row);
                            // ensure mouseclick occurred within checkbox icon's visible area
                            if (rec.grp != '0') {
                                e.stopEvent();
                            }
                        },
            
            rowclick : function (grid, row, e) {
                        var rec = grid.getStore().getAt(row);
                            // ensure mouseclick occurred within checkbox icon's visible area
                            if (rec.grp != '0') {
                                e.stopEvent();
                            }
                    }
        },

it's still not working. I am sure I am missing something here.

[Animal]

What's "rec.grp"? Where did you make that up from? It's up to you how you decide whether to stop the event. You know what a Record looks like from reading the API docs so you know it doesn't have "grp".

[miihiir]

What's "rec.grp"? Where did you make that up from? It's up to you how you decide whether to stop the event. You know what a Record looks like from reading the API docs so you know it doesn't have "grp".

Animal,

Thanks for replying. "grp" is a field within the record. I was using it directly instead of using "get".

I have the below code that deselcts the record if the condition is met. Please let me know if it's a good practice to do it this way or not.

listeners: { // add a cellclick listener to the grid
      cellclick: function(grid, row, cell, e) {
       var rec = grid.getStore().getAt(row);
       
          if ((rec.get('l_name') != '')) {
              grid.selModel.deselectRow(row, false, false);
          }
      },
   rowclick : function (grid, row, e) {
       var rec = grid.getStore().getAt(row);
       
          if ((rec.get('l_name') != '')) {
              grid.selModel.deselectRow(row, false, false);
          }
     }
  },

Thanks for everything.

[abraxxa]

If someone stumbles upon this thread like I did today...

The code works if a row or cell is clicked but fails if you click on the checkbox in the header which still selects all rows.

To fix it I've replaced the two listeners on the gridpanel by one listener on the CheckboxSelectionModel:

var sm = new Ext.grid.CheckboxSelectionModel({
        listeners:{
            // prevent selection of records with invalid descriptions
            beforerowselect: function(selModel, rowIndex, keepExisting, record) {
                if ((record.get('description_ok') != true)) {
                    return false;
                }
            },
        }
    });

[nikita01]

Thanks abraxxa
Such a simple solution that is. Thanks for saving my day!