How to use CheckboxSelectionModel with rows selected by default [Archive]

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.

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:

<!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>