1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    57
    Answers
    2
    Vote Rating
    1
    Notepad123 is an unknown quantity at this point

      0  

    Default Unanswered: How to use CheckboxSelectionModel with rows selected by default

    Unanswered: How to use CheckboxSelectionModel with rows selected by default


    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();
        
    };

  2. #2
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    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>

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar