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
}]
});
});
Unanswered: Grid in tabpanel has cellEdit plugin, causes 'event is undefined' when close new tab
Originally Posted by dedoz
Reply With Quote