PDA

View Full Version : Extending Ext.grid.Panel and using it multiple times breaks editing behavior



jschwartzberg
23 Feb 2012, 3:00 PM
In the below example, cell editing works on the second grid but when I try to edit a cell in the first grid I get "Uncaught TypeError: Cannot call method 'first' of null"

Note: I only get this error when I extend the grid and use it, not when I instantiate it directly.

Ext Version: 4.0.7



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


var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ name: 'Lisa', email: '[email protected]', phone: '555-111-1224' },
{ name: 'Bart', email: '[email protected]', phone: '555-222-1234' },
{ name: 'Homer', email: '[email protected]', phone: '555-222-1244' },
{ name: 'Marge', email: '[email protected]', phone: '555-222-1254' }
]
});


Ext.define("CustomGrid", {
extend: "Ext.grid.Panel",
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
store: userStore,
columns: [
{
text: "Name",
dataIndex: "name",
editor: 'textfield'
}
],


renderTo: Ext.getBody()


});


Ext.create("CustomGrid");
Ext.create("CustomGrid");

vietits
23 Feb 2012, 5:35 PM
You should avoid using objects on the shared prototype. Let try by adding initComponent() method and move all the config that use objects into it.


Ext.define("CustomGrid", {
extend: "Ext.grid.Panel",
selType: 'cellmodel',
store: userStore,
renderTo: Ext.getBody(),
initComponent: function(){
var me = this;


Ext.apply(me, {
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
columns: [{
text: "Name",
dataIndex: "name",
editor: 'textfield'
}],
...
});
me.callParent(arguments);
},
...
});

skirtle
23 Feb 2012, 6:20 PM
You can also get it to work just by changing the plugins config to this:


plugins: {
clicksToEdit: 1,
ptype: 'cellediting'
},

vietits raises an interesting point. In ExtJS 3 you would have needed to use initComponent but in ExtJS 4 you can make it work without. The initComponent approach is still safer (no risk of any shared references) but personally I prefer using config objects on the prototype (like the ptype example above). You have to understand the pitfalls but so long as you do it gives much neater code.

I know not everyone agrees with me about this but if you're curious I wrote my thoughts up here:

http://skirtlesden.com/articles/config-objects-on-the-prototype

You should also give some consideration to your store. Currently you're sharing the same store via the prototype. This will mean that, for example, sorting one grid also sorts the other grid. I doubt that's what you want.

jschwartzberg
23 Feb 2012, 6:38 PM
Really great information here guys, thank you. That blog post was the perfect explanation.

Is there a list of bloggers to follow somewhere with useful posts on extjs? The forums are good, but I find that blog posts can be generally more thought out.

dcoan604
25 Feb 2012, 7:32 PM
Sorry for tangent, but when you use callParent(arguments), where is "arguments" declared/defined? I've seen several cases like this, and don't understand what is going on.

evant
25 Feb 2012, 7:46 PM
https://developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope/arguments

dcoan604
25 Feb 2012, 8:20 PM
Thanks for the JavaScript 101.

Sorry for the interruption :-)