[HELPED] Check box in grid column?

[mwmayer4]

This is my first attempt at putting a checkbox in a grid panel. I'm not sure if how I did it is "the right way". Meaning, could the way I did it bite me later down the road... It's working but I'm wondering if my selModel config is "ok".

//grid.....
Ext.define('Books.view.BookmastGrid', {
    extend: 'Ext.grid.Panel',
	alias: 'widget.bookmastgrid',
	initComponent: function() {
		var me = this;
		Ext.apply(me, {
			store: 'Bookmastpfs',
			stripeRows: true,
			frame: true,
			autoScroll: true,
			selModel: Ext.create('Ext.selection.CheckboxModel', {
				mode: 'SINGLE',
				selType: 'rowmodel'
			}),

			tbar: me.buildTbar(),
			dockedItems: me.buildDockedItems(),
			columns: me.buildColumns()
		});

		me.callParent(arguments);
	},

//controller snippets....
'bookmastgrid': {
	selectionchange: this.onSelectCheckBox
},

onSelectCheckBox: function(model, record, opts) {
	var recSelected = this.getBookmastGrid().getSelectionModel().getSelection()[0];
	var bkid = recSelected.get('BKID');
         //..blah blah blah....
},

[eweiler]

The selectionchange event will get a param (#2) of an array of records that are selected. So you don't need to call 'getSelectionModel().getSelection()[0]'

Also, if the selection is changed to none selected, then you would get an error trying to access the first item of an empty array.

If you ever change your grid to be multiple select, then you would process more than one item.

[mwmayer4]

Thanks.. makes sense.. So in the view the selModel having to do the Ext.create is "normal/ok"? I wasn't sure if there was a MVC best-practice type way per say..

[eweiler]

You could code:

selModel : {
    selType: 'checkboxmodel',
    mode: 'SINGLE'
}

I'm not sure of a differenence in performance or best practices.

[mwmayer4]

I'm pretty sure I tried that first and it didn't work... so I kept digging and found the use of Ext.create for it... I may try it again. Possibly it was something else that made it not work...

[eweiler]

If it doesn't work, post up your code and the error and we'll see if we can figure out why.

[mwmayer4]

Ok, just tried it. It doesn't return an error. It does put the checkbox column in the grid. The difference is it won't fire the event selectionchange or select. I added the select event in the controller just in case. The code I posted above is good. I just made the change as you suggested to;

selModel: {
selType: 'checkboxmodel',
mode: 'SINGLE'
}

Possibly I need to add listeners.. I had tried that too but couldn't figure out which listener it would be and how to bind it to the column/row element of the checkbox..

[mwmayer4]

nevermind... my bad.. I forgot I had turned off the function the event called... so your suggestion did work with one exception.
when I took out the getSelectionModel() and tried to use parm #2 as

var bkid = record.get('BKID');

I got the error object array has no method get.

[eweiler]

The selectionchange event will get a param (#2) of an array of records that are selected.

You should rename it records instead of record, and then remember it is an array, not the selected record.

http://docs.sencha.com/extjs/4.0.7/#...electionchange

[mwmayer4]

got it! works! thanks!