This is a novice question. Hopefully this example can educate myself and others As well as fix my problem.
I have an EXTJS layout that is very similar to the EXTJS complex layout example. A TabPanel is the center piece of this layout. One of the tabs renders a GridPanel that displays some data. I want to click on an Edit icon in the table and open up a separate tab to do the editing.
Here are my issues:
var t = Ext.getCmp('main-tab-panel');
Thanks for any help on this....
// file: view_main.js
var mainTabPnl = new Ext.TabPanel({
region: 'center',
id: 'main-tab-pnl',
deferredRender: false,
activeTab: 0,
items: [{
contentEl: 'center2',
//id: 'center2', /*!!! screen goes haywire!! why? !!!*/
title: 'Main Panel',
autoScroll: true
}, {
contentEl: 'center1',
title: 'Close Me',
closable: true,
autoScroll: true
}]
})
// file: grid.js
var columns = [{
// Column Headers
//...
},{
header: 'Actions',
id: 'actions',
xtype: 'actioncolumn',
width: 50,
items: [{
icon : '/site_media/icons/application_edit.png',
tooltip: 'Edit Record',
handler: function(grid, rowIndex, colIndex) {
alert("Add-Tab "); // The alert works..
/* but mainTabPnl is not defined */
mainTabPnl.add({
title: 'New Tab',
iconCls: 'tabs',
html: 'Tab Body <br/><br/>',
closable:true
}).show();
}
}];
}];