Checkbox for view part of MVC

[sencha.user]

Hi,

I have a grid with one column, I need to add checkbox to it and do some operations using the column values.

Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',

title: 'Topic:',

store: 'Users',

initComponent: function() {
this.columns = [
{header: 'Fields', dataIndex: 'Field'}],

this.callParent(arguments);
}
});

How do I add checkbox to the same column? Please help.

Thanks!

[tvanzoelen]

You could take a look at CellEditing

http://docs.sencha.com/ext-js/4-1/#!/example/grid/cell-editing.html

[sencha.user]

Hi tvanzoelen,

I am not adding a separate column for checkbox, I need that for same column having data. Can you please add a simple CheckboxModel in the above code?

Thanks in advance!

[tvanzoelen]

Then use the renderer



initComponent: function() {
this.columns = [
{
header: 'Fields',
dataIndex: 'Field',
renderer: function(value){
var checkbox = "<input type='checkbox' value='" + value + "'> hello";
return checkbox;
}
}


],

this.callParent(arguments);
}

[sencha.user]

Hi,

Thanks for the reply. That works, but is there a way we can use,


var sm = Ext.create('Ext.selection.CheckboxModel');

and use the variable sm in the above (view) code to have checkbox in the grid for the same column?

Thanks.

[tvanzoelen]

I do not know how to do that. A SelectionModel is a SelectionModel not a data holder it self. It would be a lot of hacking I think. Just take a look at this ux.

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ux.CheckColumn

there it is combined checkbox and data. On the checkchange event you can trigger your actions.

[sencha.user]

Hi,

I am trying to do something like,

http://www.image-upload.net/di/J9GP/Capture.jpg

Will it be possible with CheckColumn?

Thanks!

[tvanzoelen]

That will be possible with the CheckBox SelectionModel. In this picture you see that the first column is a checkbox selection. The second one youre value. Its not combined in one column.

For this case just configure the checkbox selmodel in the selModel property of the grid.

[tvanzoelen]

Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',

title: 'Topic:',

store: 'Users',

initComponent: function() {

this.selModel = Ext.create('Ext.selection.CheckboxModel');

this.columns = [
{header: 'Fields', dataIndex: 'Field'}],

this.callParent(arguments);
}
});

[sencha.user]

OMG! Thanks very much, this is what I am trying. That works like a charm =D>.