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
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