PDA

View Full Version : How can I make an grid with a column of check boxes that toggle each row as editable?



benjamincuningham
13 Aug 2013, 6:36 AM
I am trying to create a grid with a column of check boxes that toggle whether or not each row is editable. As of yet, I have not found a way to make more than one row editable by any means. I like the idea of using the CheckboxModel for selection as described here (http://stackoverflow.com/questions/16957837/checkboxmodel-makes-some-particular-fields-editable), but I could not get the edit part to work and I want to edit the entire row.

scottmartin
15 Aug 2013, 7:30 AM
See if this will help



Ext.onReady(function() {

Ext.create('Ext.data.Store', {
storeId : 'simpsonsStore',
fields : ['name', 'email', 'change'],
data : {'items' : [
{ 'name' : 'Lisa', 'email' : 'lisa@simpsons.com', 'change' : 100 },
{ 'name' : 'Bart', 'email' : 'bart@simpsons.com', 'change' : -20 },
{ 'name' : 'Homer', 'email' : 'home@simpsons.com', 'change' : 23 },
{ 'name' : 'Marge', 'email' : 'marge@simpsons.com', 'change' : -11 }
]},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});

var editor = {
xtype: 'textfield',
allowBlank: false
};

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 1,
listeners : {
beforeedit : function(editor, e) {
if ( e.record.get('active') !== true ) { // false; undefined
return false;
}
}
}
});

var grid = Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
store : Ext.data.StoreManager.lookup('simpsonsStore'),
selModel: {
// selType: 'cellmodel'
},
columns : [
{ header : 'Name' , dataIndex : 'name' , editor : editor },
{ header : 'Email', dataIndex : 'email' , flex : 1, editor : editor },
{ header : 'Change', dataIndex : 'change', editor : editor },
{ xtype : 'checkcolumn', text : 'Active', dataIndex : 'active' }
],
height : 200,
width : 400,
plugins : [ cellEditing ],
renderTo : Ext.getBody()
});

});


Scott.