PDA

View Full Version : ERORR:"Cannot read property 'data' of undefined " when removing data from grid(Store)



faliqulamin
5 Nov 2012, 9:43 AM
ERORR:"Cannot read property 'data' of undefined " when removing data from grid(Store)




My console shows error "uncaught TypeError: Can not read property 'data' of undefined on ext-all-debug.js:111957 " when I did the removal of data from the selection grid / store, Does anyone find a solution for this?


Just a note: I put the grid into a window. and the data not been synchronized to the database at the time of removal

This is the window that contained a grid panel :


Ext.define('App.view.kanal.Create', {
extend: 'Ext.window.Window',
alias : 'widget.kanalCreate',
title : 'Tambah Kanal',
id: 'kanalcreate',
constrain: true,
modal: true,
autoShow : true,
renderTo: 'kanalID',
frame:true,
bodyStyle:'padding:5px 5px 0',
width: 780,
fieldDefaults: {
msgTarget: 'side',
},
initComponent: function() {
this.items = [
{
xtype: 'form',
id : 'kanaladdform',
bodyStyle: {
background: 'none',
},
items: [{
xtype: 'fieldset',
title: 'Kanal',
defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%',
},
items: [{
xtype: 'container',
layout: 'hbox',
defaults: {
labelAlign: 'right',
labelWidth: 80,
margins: '0 0 5 0'
},
items: [{
xtype: 'textfield',
fieldLabel: 'ID Kanal',
name: 'kanalID',
flex: 1,
//id : 'keywords',
allowBlank: false
},{
xtype: 'combobox',
name: 'kapasitas',
flex: 1,
fieldLabel: 'Kapasitas',
displayField:'kapasitas',
valueField:'kapasitas',
store: 'kapasitas',
typeAhead: true,
forceSelection: true,
mode:'local'
},{
xtype: 'combobox',
name: 'cusID',
flex: 1,
fieldLabel: 'Kustomer',
displayField:'cusID',
valueField:'cusID',
store: 'Customer',
typeAhead: true,
forceSelection: true,
mode:'local'

}]
},{
xtype: 'container',
layout: 'hbox',
defaults: {
labelAlign: 'right',
labelWidth: 80,
margins: '0 0 5 0'
},
items: [{
xtype: 'textfield',
fieldLabel: 'NE A',
name: 'neA',
flex: 1,
//id : 'keywords',
allowBlank: false
}, {
xtype: 'textfield',
fieldLabel: 'NE Z',
name: 'neZ',
flex: 1,
allowBlank: false
}]
},{
xtype: 'container',
layout: 'hbox',
defaults: {
labelAlign: 'right',
labelWidth: 80,
margins: '0 0 5 0'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Keterangan',
name: 'kdes',
flex: 1,
//id : 'keywords',
allowBlank: false
}]
}]
},{
xtype: 'fieldset',
title:'Detil Kanal' ,
layout: 'hbox',
items: [{
labelAlign: 'top',
xtype: 'textfield',
name : 'detID',
type: 'int',
id : 'tkdetID',
fieldLabel: 'detID',
hidden : true,
msgTarget: 'side'
},{
labelAlign: 'top',
xtype: 'textfield',
name : 'noUrut',
type: 'int',
id : 'tknoUrut',
fieldLabel: 'No',
msgTarget: 'side',
allowBlank: false,
width: 40
},{ labelAlign: 'top',
xtype: 'combobox',
name: 'traID',
id: 'tktraID',
fieldLabel: 'Transmisi',
displayField:'traID',
valueField:'traID',
store: 'Transmisi',
typeAhead: true,
flex: 1,
forceSelection: true,
mode:'local',
margins: '0 0 0 3'
},{ labelAlign: 'top',
xtype: 'combobox',
name: 'neID',
id: 'tkneID',
fieldLabel: 'NE',
displayField:'neID',
valueField:'neID',
store: 'Ne',
flex: 1,
typeAhead: true,
forceSelection: true,
mode:'local',
margins: '0 0 0 3'
},{ labelAlign: 'top',
xtype: 'combobox',
name: 'modID',
id: 'tkmodID',
fieldLabel: 'Modul',
displayField:'modID',
valueField:'modID',
flex: 1,
store: 'Modul',
typeAhead: true,
forceSelection: true,
mode:'local',
margins: '0 0 0 3'
},{ labelAlign: 'top',
xtype: 'textfield',
name : 'slot',
id : 'tkslot',
fieldLabel: 'Slot',
msgTarget: 'side',
flex: 1,
allowBlank: false,
margins: '0 0 0 3'
},{
xtype : 'button',
id : 'btnadd',
text: 'Tambah',
action: 'add',
Width : 60,
//mode:'local',
margins: '19 0 0 3'
},{
xtype : 'button',
text: 'Hapus',
action: 'remove',
Width : 60,
disabled: true,
itemId : 'tkdel',
margins: '19 0 0 3'
}] // end of detil kanal
},// end of fieldset kanal
] // end of form
},{
name: 'bio',
height: 200,
store : 'Detil',
id : 'cdList',
xtype: 'gridpanel',
columns : [
{header: 'KanalID', dataIndex: 'KanalID',flex: 1, hidden : true, filter: {type: 'string'}},
{header: 'detID', dataIndex: 'detID',flex: 1, hidden : true, filter: {type: 'string'}},
{header: 'NO', dataIndex: 'noUrut',width: 40, filter: {type: 'string'}},
{header: 'Transmisi', dataIndex: 'traID',flex: 1, filter: {type: 'string'}},
{header: 'Ne', dataIndex: 'neID',flex: 1, filter: {type: 'string'}},
{header: 'Modul', dataIndex: 'modID',flex: 1, filter: {type: 'string'}},
{header: 'Slot', dataIndex: 'slot',flex: 1, filter: {type: 'string'}}
]
}];


this.buttons = [
{
text: 'Save',
action: 'save',
formBind: true

},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];


this.callParent(arguments);
}
});


And this is my controller :



Ext.define('App.controller.Kanal', {
extend: 'Ext.app.Controller',
stores: ['Kanal','Detil','kapasitas'],
views: [
'kanal.mainList',
'kanal.kanalList',
'kanal.Create',
'kanal.Edit',
'kanal.detilList'
],
refs: [{
ref: 'mainList',
selector: 'mainList'
},{
ref: 'kanalEdit',
selector: 'kanalEdit'
}],
init: function() {
this.control({

'mainList': {
itemdblclick: this.editkan,
selectionchange: this.select
},
'kanalEdit gridpanel': {
selectionchange: this.editDet
},
'kanalCreate gridpanel': {
selectionchange: this.updateDetil
},
'kanalList button[action=addkanal]': {
click: this.newVen
},
'kanalList button[action=Clear]': {
click: this.clearfil
},
'kanalCreate button[action=add]': {
click: this.addToList
},
'kanalCreate button[action=save]': {
click: this.save
},
'kanalCreate button[action=remove]': {
click: this.removeList
}
});
},

select: function(grid, record) {
var detilList = Ext.ComponentQuery.query('detilList')[0];
var viewList = Ext.ComponentQuery.query('#mainID')[0];
var selection=viewList.getSelectionModel().getSelection()[0];
detilList.store.load({
params: { kanalID: selection.data.kanalID}
})
},

newVen: function(button) {
var detilList = Ext.ComponentQuery.query('detilList')[0];
detilList.store.removeAll();
var view = Ext.widget('kanalCreate');
Ext.getCmp('tknoUrut').setValue(1);
Ext.getCmp('tkdetID').setValue(1);
},

clearfil: function () {
var xx = this.getMainList();
xx.filters.clearFilters();
var detilList = Ext.ComponentQuery.query('detilList')[0];
},

addToList : function (button) {
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
var valid = form.getForm();
if (Ext.ComponentQuery.query('#btnadd')[0].text == 'Tambah')
{
if (valid.isValid()) {
this.getDetilStore().add(values);
Ext.getCmp('tknoUrut').setValue(Number(Ext.getCmp('tknoUrut').value)+1);
Ext.getCmp('tkdetID').setValue(Number(Ext.getCmp('tkdetID').value)+1);
Ext.getCmp('tkslot').reset();
}
}else
{
record.set(values);
Ext.getCmp('tkslot').reset();
var btnlbl = Ext.ComponentQuery.query('#btnadd')[0];
btnlbl.setText('Tambah');
}
},
save: function(button) {
var detilList = Ext.ComponentQuery.query('detilList')[0];
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
var valid = form.getForm();
if (valid.isValid()) {
console.log(values);
this.getKanalStore().add(values);
console.log('Sebelum sync');
this.getDetilStore().sync();
console.log('on progress sync');
this.getKanalStore().sync();
this.getKanalStore().load();
console.log('Setelah sync');
this.getDetilStore.removeAll();
}
},

removeList: function() { // beres
var viewList = Ext.ComponentQuery.query('#cdList')[0];
var selection=viewList.getSelectionModel().getSelection()[0];
if(!selection)
{
Ext.Msg.alert('Pilih data terlebih dahulu');
}
else
{
Ext.getCmp('tktraID').reset();
Ext.getCmp('tkneID').reset();
Ext.getCmp('tkmodID').reset();
Ext.getCmp('tkslot').reset();
var btnlbl = Ext.ComponentQuery.query('#btnadd')[0];
btnlbl.setText('Tambah');
this.getDetilStore().remove(selection);
}

},
});


PLEASE HELP ME, I stopped here a few days

I DETECT ERROR AT :


this.getDetilStore().remove(selection);



39832

tvanzoelen
6 Nov 2012, 2:09 AM
What line in your code hits the error. Is it possible to narrow it down a bit? Try to make a smaller example.

faliqulamin
9 Nov 2012, 8:57 AM
after searching for a few days I find out the faults, errors occur because I have not unload "loadrecord()" on my form.

but now I am confused how to Unload "loaded record" on my form,


is there any one who can help me