1. #1
    Ext User
    Join Date
    May 2008
    Posts
    21
    Vote Rating
    0
    miihiir is on a distinguished road

      0  

    Default checkboxselection model disable some checkboxes

    checkboxselection model disable some checkboxes


    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 -

    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.

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  3. #3
    Ext User
    Join Date
    May 2008
    Posts
    21
    Vote Rating
    0
    miihiir is on a distinguished road

      0  

    Default


    Animal,

    Thanks a lot for replying.

    Quote Originally Posted by Animal View Post
    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?

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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./

  5. #5
    Ext User
    Join Date
    May 2008
    Posts
    21
    Vote Rating
    0
    miihiir is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    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.
    Quote Originally Posted by Animal View Post
    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 -
    Code:
    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.

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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".

  7. #7
    Ext User
    Join Date
    May 2008
    Posts
    21
    Vote Rating
    0
    miihiir is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    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.

    Code:
    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.

  8. #8
    Ext JS Premium Member
    Join Date
    May 2008
    Location
    Austria, Vienna
    Posts
    219
    Vote Rating
    1
    abraxxa is on a distinguished road

      1  

    Default


    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:

    Code:
    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;
                    }
                },
            }
        });

  9. #9
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    1
    Vote Rating
    0
    nikita01 is on a distinguished road

      0  

    Default Thanks!

    Thanks!


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