How to display a checkbox in Ext.grid.GridPanel? - ajax

Question

I need to display a checkbox for column "Active" and when I change the selection to be to able to make an ajax request, to update the database.
Some sample code will help me a lot.
Thanks.

Answer 1

Please check this link: Extjs Grid plugins.
You can check sources for second grid.
Also you need listen 'selectionchange' event for selection model of the grid - so you'll have selected rows and then you can submit a request to server or whatever you need.
If you need specific column (not the first one) - you can check this link: Checkbox in the grid
And I think this is same here too: how to add checkbox column to Extjs Grid

Answer 2

This is example from one of my projects:
Ext.define('Magellano.view.news.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.newslist',
store: 'News',
remoteSort: false,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Online',
id: 'online-button',
enableToggle: true,
icon: '/images/light-bulb.png',
pressed: true,
handler: onItemToggle
}, { text: 'Preview',
id: 'preview-button',
enableToggle: true,
pressed: true
}],
initComponent: function() {
this.selModel = Ext.create('Ext.selection.CheckboxModel', {
singleSelect: false,
sortable: false,
checkOnly: true
});
this.columns = [
{ text: '', width: 28, renderer: function(val) { return "<img src='/images/star-empty.png' height='16' width='16'></img>"}},
{ text: 'Date', width: 60, dataIndex: 'newstime', renderer: renderDate},
{ text: 'Agency', width: 60, dataIndex: 'agency', renderer: function(val) { return val;}},
{ text: 'Category', width: 60, dataIndex: 'category', renderer: function(val) { return val;}},
{ text: 'Title', flex: 1, dataIndex: 'title',
renderer: function(val) { return Ext.String.format('<b>{0}</b>', val); }
}
];
this.title = "News from " + Ext.Date.dateFormat(new Date(), "j M Y");
this.callParent(arguments);
}
}
The important part is that in the initComponent you create the selection model:
this.selModel = Ext.create('Ext.selection.CheckboxModel', {
singleSelect: false,
sortable: false,
checkOnly: true
});