PDA

View Full Version : Grid Editing Not working from second time



funnyfox
30 Jan 2013, 11:07 PM
I have a Grid Panel where I enabled editing.
First time the editing goes fine, when I browse to other parts of the application and come back to edit this grid again, editing doesn't work.

The Error is Uncaught Type Error : Cannot call 'down' of undefined.

The error comes from below snippet of ext-all-debug.js


getCell: function(record, column) {

var row = this.getNode(record);

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

},



Here is my observation, First Time this object looks like below.

41581



When the error arises this object state is as follows, the highlighted items above are not present below.

41582



Grid Panel Code


Ext.define('tz.ui.TNEGridPanel', {
extend: 'Ext.grid.Panel',
title: '',
frame:false,
height: 220,
width:'100%',
listeners: {
edit: function(editor, event){
var record = event.record;
if(editor.context.field == 'hrs'){
record.data.earnedAmount = record.data.Rate * record.data.hrs;
}
}
},

initComponent: function() {
var me = this;
me.store = ds.tneDetailStore;

me.columns = [
{
text : 'Type',
dataIndex : 'type',
width : 120,
},

{
dataIndex: 'startDate',
text: 'Start Date',
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
width:75
},
{
dataIndex: 'endDate',
text: 'End Date',
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
width:75
},
{
dataIndex: 'Hours',
align : 'right',
text: 'Hours',
width:75,
editor: {
xtype: 'numberfield',
allowBlank: false
}
},
{
dataIndex: 'Rate',
align : 'right',
text: 'Emp Rate',
renderer : Ext.util.Format.usMoney,
width:80
},{
dataIndex: 'Amount',
text: 'Amount',
align : 'right',
renderer : Ext.util.Format.usMoney,
width:110,
editor: {
xtype: 'numberfield',
allowBlank: false
}
},{
dataIndex: 'payAmount',
text: 'Pay Amount',
align : 'right',
renderer : Ext.util.Format.usMoney,
width:110,
editor: {
xtype: 'numberfield',
allowBlank: false
}
},{
dataIndex: 'expenses',
text: 'Earned Expenses',
align : 'right',
renderer : Ext.util.Format.usMoney,
width:110,
editor: {
xtype: 'numberfield',
allowBlank: false
}
},{
dataIndex: 'paidExpenses',
text: 'Paid Expenses',
align : 'right',
renderer : Ext.util.Format.usMoney,
width:110,
editor: {
xtype: 'numberfield',
allowBlank: false
}
},{
dataIndex: 'comments',
text: 'Comments',
labelAlign:'center',
align : 'left',
width:370,
editor: {
xtype: 'textfield',
allowBlank: false
}
}
];

me.dockedItems = [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Save',
id : 'saveTs',
name : 'save',
iconCls : 'btn-save',
scope : this,
handler: function(){
this.saveConfirm();
}

}]
}
];

me.viewConfig = {
stripeRows: true
};

me.callParent(arguments);
},

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


Any Help is appreciated, we are using EXT 4.0

mitchellsimoens
1 Feb 2013, 11:39 AM
You do this:


plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]

but you shouldn't use Ext.create outside of a method. Try this:


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

funnyfox
4 Feb 2013, 7:28 AM
Thank you . That worked.