PDA

View Full Version : how to add editing plugin to grid dynamically



user14
16 Aug 2012, 3:39 PM
I have a code which creates window with grid and button. Grid doesn't have any "editing" .
I'd like to add that plugin to grid when I click on button.



Ext.onReady(function() {

Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email' ]
});

var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com' },
{ name: 'Bart', email: 'bart@simpsons.com' },
{ name: 'Homer', email: 'home@simpsons.com' },
{ name: 'Marge', email: 'marge@simpsons.com' }
]
});

var gridPanel= Ext.create('Ext.grid.Panel', {
id:'gridPanel',
store: userStore,
width: 400,
height: 250,
columns: [
{
text: 'Name',
width: 100,
dataIndex: 'name'
},
{
text: 'Email Address',
width: 150,
dataIndex: 'email'
}
]
});

var addButton=Ext.create('Ext.Button',{
text:"Add record and edit it",
id:"addID",
listeners : {
click: function(btn, e, eOpts) {
var newUser = new User({});
grid.store.insert(0, newUser);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);

??? what should I put here to be able to edit new row in the grid pls ????


}
}


});

var win= Ext.create('Ext.Window', {
width: 500,
height: 330,
title: 'Window with grid',
items: [ gridPanel ]

});

win.add(addButton);
win.show();

});

scottmartin
17 Aug 2012, 10:13 AM
Have a look at this example:
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/cell-editing.html

You need to add editor: {} to the columns you want to edit

Then add the editing plugin:

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
}

Then add the plugin to the grid:

plugins: [cellEditing]

See the 'Add Plant' button in demo.

Scott.