How to use CheckboxSelectionModel with rows selected by default

**Notepad123** · 26 Jan 2012 8:21 AM

Can someone please help me how to use CheckboxSelectionModel and GridPanel so that some records are already selected/checked.
Currently I know how to do this by clicking on Buttone and then using
grid.getSelectionModel().selectRows(selectedItems);

But I don't know how to do this automatcly as soon as gridpanel is shonwn.
I have tried different GridPanel listerens like onshow, afterrender, afterlayout and so on but either there is no store or Panel is already shown without selected rows.

Code:

Ext.onReady(helloWorld);


function helloWorld(){ 
  
  //SELECTION MODEL.
  var sm = new Ext.grid.CheckboxSelectionModel({
    singleSelect: false,   
  });
  
  //GRID.
  var grid = new Ext.grid.GridPanel({
    
    height       : 100,
    
    columnLines  : true,  
    selModel     : sm,
    
    store        : new Ext.data.ArrayStore({
      autoLoad   : true,
      fields     : [  'isset', 'id', 'name', 'age' ],
      data       : [ ['true' , '1' , 'John2', '35'  ],
                     ['true' , '2' , 'Jill', '40'  ], 
                     ['false', '3' , 'Bill', '20'  ], 
                   ]
    }),
    
    colModel     : new Ext.grid.ColumnModel({
      columns    : [
        sm,
        {header  : 'NAME', dataIndex: 'name', id: '10'},
        {header  : 'AGE' , dataIndex: 'age'           },
      ],
    }),
    
    listeners     : {      
      onviewready  : function() { console.log("beforelayout"+this.height); sm.selectRow(0); },
      afterlayout : function() { console.log("afterlayout" +this.height); sm.selectRow(0); },
    }    
       
  });
  
  var srcBtn = new Ext.Button({
    text   : 'Search',
    handler: function() {
      console.log("Button");
      //grid.getSelectionModel().selectRow(0);
      //grid.getSelectionModel().selectRow(2);      
      //store = grid.getStore().filter('isset', 'true'); //This will show only records with isset=true
      selectedItems = [];
      store = grid.getStore();
      store.data.each(function(item, index, totalItems ) {
        console.log(index+" - "+item.data['isset']);        
        if(item.data['isset']=='true') { selectedItems.push(index); }        
      });      
      grid.getSelectionModel().selectRows(selectedItems);
      console.log(store);
      console.log(selectedItems);
    }    
  });  
  
  //WINDOW.
  var myWin    = new Ext.Window({
    title        : 'GridPanel',
    height       : 200,
    width        : 250,
    //layout       : 'fit',
    items        : [grid, srcBtn],
    listeners     : {      
      beforeshow  : function() { console.log("beforelayout"+this.height); sm.selectRow(0); },
      afterlayout : function() { console.log("WINDOW afterlayout" +this.height); grid.getSelectionModel().selectRow(0); grid.doLayout(); },
      beforeshow : function() { console.log("WINDOW beforeshow" +this.height); grid.getSelectionModel().selectRow(0); grid.doLayout(); },
    }    
  });
  
//  grid.addListener('beforerender', function() {
//    console.log("hi");
//    grid.getSelectionModel().selectRecords(grid.getStore().filter('isset', 'true'));
//  });  
  
  myWin.show();
    
};

**friend** · 26 Jan 2012 10:05 AM

This may be a bit of a kludge, but it works. Note that I refactored/snipped your code sample a bit for brevity's sake:

Code:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>CheckboxModel Test</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

    <script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
    <script type="text/javascript">
    Ext.Loader.setConfig({enabled:true});
    
    Ext.onReady(helloWorld);

    function deferSelect() {
      var grid = Ext.ComponentQuery.query('grid')[0];
      grid.getSelectionModel().select( grid.getStore().find('isset', 'true') );
    };
    
    
    function helloWorld(){ 
      
      //GRID.
      var grid = Ext.create('Ext.grid.Panel', {
        height       : 100,
        columnLines  : true,  
        selModel     : Ext.create('Ext.selection.CheckboxModel'),
        store        : new Ext.data.ArrayStore({
          fields     : [  'isset', 'id', 'name', 'age' ],
          data       : [ ['true' , '1' , 'John2', '35'  ],
                         ['true' , '2' , 'Jill', '40'  ], 
                         ['false', '3' , 'Bill', '20'  ], 
                       ]
        }),
        columns    : [
          {header  : 'NAME', dataIndex: 'name'},
          {header  : 'AGE' , dataIndex: 'age'           },
        ]
      });
      
      var srcBtn = Ext.create('Ext.Button', {
        text   : 'Search',
        handler: function() {
                  
        }    
      });  
      
      //WINDOW.
      var myWin    = Ext.create('Ext.Window', {
        title        : 'GridPanel',
        height       : 200,
        width        : 250,
        items        : [grid, srcBtn]
      });
      
      myWin.show();
       
      Ext.defer(deferSelect, 500);
      
    };
    </script>
  </head>

  <body>
  </body>
</html>

How to use CheckboxSelectionModel with rows selected by default

Thread Tools

Search Thread

Display

Unanswered: How to use CheckboxSelectionModel with rows selected by default

Unanswered: How to use CheckboxSelectionModel with rows selected by default