PDA

View Full Version : Grid in tabpanel has cellEdit plugin, causes 'event is undefined' when close new tab



PaulyWolly
11 Feb 2012, 10:03 AM
I have a grid in a tabpanel. I click a row in the grid and a new tab opens with details for the clicked item. The newly created tabs also have grids in them, with the cellEditing plugin. The details on the new tab opened can be edited and then sent back to the server through CRUD routines. I am using the cellEditing plugin, and it seems to be working fine to edit the cell, but when I close the tab after performing edits I get an error "event is undefined". Why might this be occurring?

Is there a way to edit a cell in a grid without using the cellEditing plugin? ...or maybe a way to fix the plugin to get it to work? I am using the plugin in the Ext.apply section of my initComponent for the grid.

I am using ext-all-debug.js and the error looks to be coming from an area where a function call is for 'removeListener', from line 13367 in ext-all-debg.js I do not believe I have any listeners on the page, so why is this error coming up on tab close?

dedoz
11 Feb 2012, 6:46 PM
post some code & extjs version, prolly ur error is not coming from the plugin

PaulyWolly
11 Feb 2012, 7:43 PM
post some code & extjs version, prolly ur error is not coming from the plugin

Ext version is 4.0.7

Here is my code:


Ext.onReady(function() {

Ext.define('TableListModel', {
extend: 'Ext.data.Model',
fields: ['tbllID', 'tbllTABLENAME']
});

var tableListData = [
[
"83", "TABLE_A1"
], [
"84", "TABLE_A1B"
], [
"85", "TABLE_A2"
], [
"86", "TABLE_A3"
], [
"87", "TABLE_A4"
], [
"88", "TABLE_A5"
]
];

Ext.define('TargetListModel', {
extend: 'Ext.data.Model',
fields: ['targlID', 'targlTARGETNAME', 'targlFAMILYNAME', 'targlTABLENAME', 'targlTARGETLABEL']
});

var targetListData = [
[
"3",
"C_8200A_R2X_T_DC",
"2G",
"TABLE_A1",
"8200A Rel2X [Thin DC]"
],[
"4",
"C_6610_SUPPORTED",
"2G",
"TABLE_A1",
"6610 [Supported]"
],[
"5",
"C_7X30_8X60_F_BMP",
"2G",
"TABLE_A1",
"7x30\/8x55\/8x60 [Full BMP]"
],[
"9",
"C_6295_6155_F_BREW",
"2G",
"TABLE_A1",
"6295,6200,6695,6600,6175,6185,6195,6165,6155 [Full BREW]"
],[
"13",
"C_8250_8650A_F_LNX",
"2G",
"TABLE_A1",
"8250\/8650\/8650A [Full Linux]"
]
];


Ext.define('TargetViewModel', {
extend: 'Ext.data.Model',
fields: ['tvID', 'tvTARGETNAME', 'tvFAMILYNAME', 'tvTABLENAME', 'tvTARGETLABEL']
});

var targetViewData = [
[
"3",
"C_8200A_R2X_T_DC",
"2G",
"TABLE_A1",
"8200A Rel2X [Thin DC]"
],[
"4",
"C_6610_SUPPORTED",
"2G",
"TABLE_A1",
"6610 [Supported]"
],[
"5",
"C_7X30_8X60_F_BMP",
"2G",
"TABLE_A1",
"7x30\/8x55\/8x60 [Full BMP]"
],[
"9",
"C_6295_6155_F_BREW",
"2G",
"TABLE_A1",
"6295,6200,6695,6600,6175,6185,6195,6165,6155 [Full BREW]"
],[
"13",
"C_8250_8650A_F_LNX",
"2G",
"TABLE_A1",
"8250\/8650\/8650A [Full Linux]"
]
];

Ext.define('GGtargetViewStore', {
extend : 'Ext.data.Store',
proxy : {
type : 'ajax',
url : targetViewData,
reader : {
type: 'json',
root: 'data'
}
},
autoDestroy : true,
model: 'TargetViewModel',
autoLoad : false
});

// combo defines
// Combo for family drop-down
var familyCombo = Ext.create( Ext.form.ComboBox, ({
triggerAction: 'all',
fieldLabel: 'Family',
labelWidth: 75,
queryMode: 'local',
style: 'margin : 5px 0 5px 2px',
store: Ext.create( Ext.data.ArrayStore, ({
fields: [
'myId',
'displayText'
],
data: [
['2G', 1],
['3G', 2],
['LTE', 3]
]
})),
displayField: 'myId',
valueField: 'myId'
}));
familyCombo.on('select', function (field, record, index) {
familyName = field.value;
}, this);

// Combo for table drop-down
var tableCombo = Ext.create( Ext.form.ComboBox, ({
triggerAction: 'all',
queryMode: 'local',
fieldLabel: 'Table',
labelWidth: 75,
store: Ext.create( Ext.data.ArrayStore, ({
fields: [
'ID',
'TABLENAME'
],
data: tableListData
})),
style: 'margin : 5px 0 5px 2px',
valueField: 'TABLENAME',
displayField: 'TABLENAME',
familyName: this.familyName
}));
tableCombo.on('select', function (field, record, index) {

var tableName = field.value;

// create a new tab and show all targets selected
//var ct = Ext.getCmp('my-main-content').getComponent('tabContainer2G'),
var ct = Ext.getCmp('my-main-content').getComponent('tabContainer2G'),
item = ct.add(Ext.create( TargetList, ({
title: tableName + ' - Targets Listing', //title on new tab created
tname: tableName,
fId: familyName,
closable: false,
layout: 'fit',
scope: this
})));

ct.setActiveTab(item);
}, this);



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

//TargetList Grid definitionimore
var GGTargetsView = Ext.define('GGTargetsView', {

extend: 'Ext.grid.Panel',
alias: 'widget.ggtargetsview',

itemId: 'GGTaObject',
initComponent: function () {

Ext.apply(this, {

border: 0,
frame: false,
layout: 'fit',
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
store: Ext.create( Ext.data.ArrayStore,({
model: 'TargetViewModel',
data: targetViewData
})),
columns: [{
dataIndex: 'ID',
header: 'ID',
width: 50,

},
{
dataIndex: 'tvTARGETNAME',
header: 'Target Name',
width: 200,

},
{
dataIndex: 'tvFAMILYNAME',
header: 'Family Name',
width: 100,

},
{
dataIndex: 'tvTABLENAME',
header: 'Table name',
width: 100
},
{
dataIndex: 'tvTARGETLABEL',
header: 'Target Label',
width: 150,
editor: { // this field ONLY has the editor
allowBlank: false
}
}],
viewConfig: {
stripeRows: true
}

}); // eo Apply

this.callParent(arguments);
}
});


//TargetList Grid definition
var TargetList = Ext.define('TargetList', {

extend: 'Ext.grid.Panel',
alias: 'widget.targetlist',

itemId: 'TaObject',
initComponent: function () {

Ext.apply(this, {

border: 0,
frame: false,
layout: 'fit',
idProperty: true,
store: Ext.create( Ext.data.ArrayStore,({
model: 'TargetListModel',
data: targetListData
})),
columns: [
{
header: 'ID',
dataIndex: 'targlID',
width: 50
},
{
header: 'Target Name (TargetList)',
dataIndex: 'targlTARGETLABEL',
width: 400
},
{
header: 'Family Name',
dataIndex: 'targlFAMILYNAME',
width: 100
}
],
viewConfig: {
itemId: 'view',
listeners: {
scope: this,
itemdblclick: this.onDblClick
}
}

}); // eo Apply

this.callParent(arguments);
},

onDblClick: function (grid, index) {

var rowNode = this.view.getNode(index),
record = this.view.getRecord(rowNode);
this.createTargetGridView(record.get('targlID'), record.get('targlTARGETNAME'), record.get('targlTABLENAME'), record.get('targlFAMILYNAME'));
},

createTargetGridView: function (id, targName, tablName, famName){
console.log('fId: ' + id + ', targ_name: ' + targName + ', tableName: ' + tablName + ', famName: ' + famName);

//TargetView created on Target record click from TargetList
if (famName === '2G') {

// create a new tab and show all targets selected
var ct = Ext.getCmp('my-main-content').getComponent('tabContainer2G'),
item = ct.add(Ext.create( GGTargetsView, ({
title: targName + ' - Targets View Listing', //title on new tab created
/*store: Ext.create( Ext.data.ArrayStore, ({
//id: id,
model: 'TargetViewModel',
data: targetViewData,
scope: this
})),
*/
closable: true
})));

ct.setActiveTab(item);
console.log(item);

}

}
});

Ext.define('APIlayout', {

extend: 'Ext.panel.Panel',
alias: 'widget.apilayout',

initComponent: function() {

Ext.apply(this, {
width: 350,
layout: 'border',
id: 'my-main-content',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:1px'
},
items: [
{
title: 'Choose content',
region:'west',
margins: '5 0 5 5',
cmargins: '5 5 5 5',
style: 'padding: 0px 0px 0px 0px',
width:250,
minSize: 200,
items: [familyCombo, tableCombo]

},
{
collapsible: false,
region: 'center',
id: 'my-tabpanel',
xtype: 'tabpanel',
style: 'padding:5px 5px 5px 0px',
itemId: 'tabContainer2G'

}],
viewConfig: {
itemId: 'view',
listeners: {
scope: this
}
}
});
this.callParent(arguments);
}
});

var viewport = Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 20
},
defaults: {
border: false
},
items: [{
region: 'center',
xtype: 'apilayout',
frame: false,
plain: true
}]
});

});

PaulyWolly
15 Feb 2012, 1:20 PM
Please respond