Using checkbox (and only the checkbox) on EditorGrid row to trigger Row Sel. Model

[Ducky]

I am trying to use a Checkbox which is the first field in an EditorGrid row to trigger a Row Selection Model. Originally, I tried using a Checkbox Selection Model. That gave me the checkbox at the beginning of the row, and selected the row that I wanted which I used to get information for a grid in a popup window that I coded. The selection and the popup window worked fine except for the fact that there were other editable fields in the row that I was selecting. When I tried to edit any of those fields, the Checkbox Selection Model kicked in and my grid in a window popped up. Next I tried setting up a check column and making that column part of my column model. What I would then get is text (true or false) appearing where the checkbox should be. When I would click on the text, the checkbox would finally appear. I abandoned the check column and tried putting an entry in the column model with an xtype of 'booleanfield' and then later 'booleancolumn' and having an editor on that column with an xtype of 'checkbox'. That gave me the same results as with a check column, ie text appeared where the checkbox should be and only after I clicked on the text did the checkbox appear.

My latest attempt came from an analogous issue that Ken Toole found on the EXTJS forum. This involved using a check column again and referencing it in the column model and using a specially defined renderer for it. The result of this attempt is that now the text shows up but is not clickable. The special renderer to create a checkbox is not working. Below you will find my code which reflects the latest attempt. I am just trying at this point to get the checkbox to appear but I want to put a listener on that checkbox somehow to trigger the Row Selection Model...

Here is my checkColumn:

var pnAlloc = new Ext.grid.CheckColumn({
header: 'Pen Alloc?',
dataIndex: 'PNALLOC',
width: 40

});

Here is my column model:

var cm = new Ext.grid.ColumnModel({
columns: [
// pnAlloc,
{header: '<b>Pen Alloc?</b>',width: 65,align: 'center',xtype: 'booleancolumn',dataIndex: 'PNALLOC',renderer: formatBoolean,editable: false},
{header: '<b>Qty</b>',width: 80,sortable: true, editor:{xtype: 'numberfield',allowBlank: false,selectOnFocus: true}, dataIndex: 'CSTQTY'},
{header: '<b>Sex</b>',width: 100,sortable: true,dataIndex: 'DLSEXD'},
{header: '<b>Hatch Loc</b>',width: 80,sortable: true,hidden: true,editor:{ xtype: 'textfield',allowBlank: false,selectOnFocus: true}, dataIndex: 'DLHLOC'},
{header: '<b>Hatch Farm#</b>',width: 80,sortable: true,editor:{ xtype: 'numberfield',allowBlank: false,selectOnFocus: true}, dataIndex: 'DLHFARMNO'},
{header: '<b>Hatch BarnId</b>',width: 80,sortable: true, editor:{ xtype: 'textfield',allowBlank: false,selectOnFocus: true}, dataIndex: 'DLHBARNID'},
{header: '<b>Hatch Flck Yr</b>',width: 80,sortable: true, editor:{ xtype: 'numberfield',allowBlank: false,selectOnFocus: true}, dataIndex: 'DLHYEAR'},
{header: '<b>Hatch Flck Id#</b>',width: 80,sortable: true,editor:{ xtype: 'numberfield',allowBlank: false,selectOnFocus: true}, dataIndex: 'DLHNUM'},
{header: '<b>Hatch PenId</b>',width: 80,sortable: true, editor:{ xtype: 'textfield',allowBlank: false,selectOnFocus: true}, dataIndex: 'DLHPENID'},
{header: '<b>Set Date</b>',xtype: 'datecolumn', width: 100,sortable: true, format:'Y-m-d',editor:{ xtype: 'datefield',allowBlank: false,selectOnFocus: true}, dataIndex: 'DLSDAT'},
{header: '<b>Test Lot</b>',width: 80,sortable: true, editor:{ xtype: 'textfield',allowBlank: false,selectOnFocus: true}, dataIndex: 'DLTSLT'},
{header: '<b>Day Old Cst</b>',width: 80,sortable: true,dataIndex: 'BABYCST'},
{header: '<b>.00 % Free</b>',width: 80,sortable: true,dataIndex: 'DLMORP'},
{header: '<b>Audit Credit</b>',width: 80,sortable: true,dataIndex: 'DLAUDIT'},
{header: '<b>Energy Credit</b>',width: 80,sortable: true,dataIndex: 'DLENERGY'},
{header: '<b>Net Cost</b>',width: 120,sortable: true,dataIndex: 'NETCOST'},
{header: '<b>Cost</b>',width: 120,sortable: true,dataIndex: 'LINECST'}


]

});

Here is my editor grid:

var ticketGrid3 = new Ext.grid.EditorGridPanel({
id: 'grid03',
height: 200,
store: store3,
clicksToEdit: 1,
//plugin:[pnAlloc],

// ds: ds,
cm: cm,
enableColLock:false,
listeners: { // add a cellclick listener to the grid
cellclick: function(o, row, cell, e){
// ensure mouseclick occurred within checkbox icon's visible area
if (o.getColumnModel().getDataIndex(cell) == 'PNALLOC' && e.getTarget('.checkbox', 1)) {
var rec = o.getDataSource().getAt(row);
rec.set('PNALLOC', !rec.get('PNALLOC')); // toggle "PNALLOC" value
}
}
},

sm: smPen

});

here is my renderer:

function formatBoolean(value, cell, rec, rowIndex, colIndex, ds) {
return [
'<img ',
'class="checkbox" ', // give the checkbox image a css class of "checkbox"
'src="../../resources/images/default/menu/',
value? 'checked.gif' : 'unchecked.gif',
'"/>'
].join("");

};

[twosouth]

Hi Ducky,

Part of your post...

I am trying to use a Checkbox which is the first field in an EditorGrid row to trigger a Row Selection Model. Originally, I tried using a Checkbox Selection Model. That gave me the checkbox at the beginning of the row, and selected the row that I wanted which I used to get information for a grid in a popup window that I coded. The selection and the popup window worked fine except for the fact that there were other editable fields in the row that I was selecting. When I tried to edit any of those fields, the Checkbox Selection Model kicked in and my grid in a window popped up.

I think you were on the right track up to this point.

The CheckBoxSelectionModel has a config option that will allow you to click the other cells (and then edit them) without selecting the checkbox.

   var cbsm = new Ext.grid.CheckboxSelectionModel({
                    checkOnly: true
                });

The checkOnly config option set to true should give you what you need.

I was able to add the CheckBoxSelectionModel to a grid with the checkOnly setting and edit other cells without firing the checkbox. This should take care of it for you.

This way, the checkbox is only selected when you actually click the checkbox itself - which what it sounds like you want.

Scott

[Ducky]

Thanks Scott

Scott,

Thanks for that tip. It worked like a charm once I imported the checkbox selection model from an earlier version and got rid of what wasn't working. I just spent the better part of a week figuratively wandering in the wilderness. Given that it is the first config option for the CheckboxSelectionModel, my colleague and I probably stared right at it and missed it! I'm a bit curious, however, why the default for it is not true rather than false. For an editor grid, it would always need to be true and if you don't have an editor grid, if you can click on the line anywhere, why do you need a checkbox? At any rate, thanks again!