Editable Grid not working

[rTankersley]

Hey all,

I'm trying to make an editable grid. I basically copy/pasted the code from the editing example in the grid docs, and when that didn't work, I went to one of the large grid examples and used that code. Both caused the same error. Here is my grid and my store:


var store = Ext.create('Ext.data.Store', { fields: ['tag']
});


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


Ext.define('Eclipse.view.previewController.resourceEvalGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.resourceEvalGrid',
columns: [
{ header: 'Tag', dataIndex: 'tag', flex: 1, editor: { allowBlank: false} }
],
title: 'Insert Tags',
selModel: {
selType: 'cellmodel'
},
plugins: [cellEditing],
forceFit: true,
hideHeaders: true,
tbar: ['->', {
xtype: 'button',
text: 'Insert',
action: 'insert'
}]
});

I give the grid the store when I put it in a panel.

I can insert a record into the table, but when I click on it to edit it I receive this error:

Ext.fly(row) is null
return Ext.fly(row).down(column.getCellSelector());

Thanks for the help.

[mitchellsimoens]

Sounds like the grid isn't being refreshed with the Store properly. You also are using Ext.define the best...


Ext.define('Eclipse.view.previewController.resourceEvalGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.resourceEvalGrid',

title: 'Insert Tags',
forceFit: true,
hideHeaders: true,

initComponent: function() {
var me = this;

Ext.apply(me, {
columns : me.buildColumns(),
plugins : me.buildPlugins(),
selModel : me.buildSelModel(),
tbar : me.buildTbar()
});

me.callParent(arguments);
},

buildColumns: function() {
return [
{ header: 'Tag', dataIndex: 'tag', flex: 1, editor: { allowBlank: false} }
];
},

buildPlugins: function() {
return [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
];
},

buildSelModel: function() {
return {
selType: 'cellmodel'
};
},

buildTbar: function() {
return [
'->',
{
xtype: 'button',
text: 'Insert',
action: 'insert'
}
];
}
});

[rTankersley]

Thanks for your reply, but what do you mean the grid isn't being refreshed with the store properly?

I read it as meaning that it isn't receiving the store's data, but the data shows up on the grid when I insert it, and I gave the store inline data that also showed up on the grid and still did not work.

Any recommendations on how I could fix the problem you see?

[rTankersley]

Nevermind, I figured it out.

I made a loop that was making multiple resourceEvalGrids. For some reason, it didn't like that. Instead, I just deleted the define and copy pasted all the configs into the loop, rather than defining it first. Now it works.

Here's the code for what I was doing and what I changed it to:

Not Working

for(var a = 0; a < data.items.length; a++) {
Ext.getCmp('explorePanel').add({
xtype: 'resourceEvalPanel',
items: [{
xtype: 'resourceEvalGrid',
store: Ext.create('Ext.data.Store', {
fields: ['tag'],
data: [{'tag': 'hello'}]
}),
flex: 1
},{
xtype: 'resourceEvalForm',
flex: 1
}]


Working:

for(var a = 0; a < data.items.length; a++) {
Ext.getCmp('explorePanel').add({
xtype: 'resourceEvalPanel',
items: [{
xtype: 'grid',
store: Ext.create('Ext.data.Store', {
fields: ['tag'],
data: [{'tag': 'hello'}]
}),
flex: 1,
columns: [
{ header: 'Tag', dataIndex: 'tag', flex: 1, editor: { allowBlank: false} }
],
title: 'Insert Tags',
selModel: {
selType: 'cellmodel'
},
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})],
forceFit: true,
hideHeaders: true,
tbar: ['->', {
xtype: 'button',
text: 'Insert',
action: 'insert'
}]
},{
xtype: 'resourceEvalForm',
flex: 1
}]
});
}

Thanks for your help. Also, if anyone can tell me why the top one doesn't work, I'll mark that best answer. Otherwise, I'll mark mine the best answer so the thread shows it's been answered.