how do i create a tab in a tabpanel onclick? - extjs

Question

I have an actioncolumn in a grid. I used to open a window after i clicked on this but now do we want to open a new tab in the tabpanel instead of the windows. This is the tab i want to generate when someone clicks on the actionpanel:
Ext.define('MyApp.view.MyTabPanel2', {
extend: 'Ext.tab.Panel',
alias: 'widget.mytabpanel2',
closable: true,
title: 'Report {name}',
activeTab: 1,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'textfield',
fieldLabel: 'Reference',
labelAlign: 'top'
},
{
xtype: 'datefield',
fieldLabel: 'From',
labelAlign: 'top'
},
{
xtype: 'datefield',
fieldLabel: 'To',
labelAlign: 'top'
},
{
xtype: 'tbfill'
},
{
xtype: 'button',
text: 'Open report'
},
{
xtype: 'button',
text: 'Save report'
},
{
xtype: 'button',
text: 'Export report'
},
{
xtype: 'button',
text: 'Refresh data'
}
]
}
],
items: [
{
xtype: 'gridpanel',
title: 'Grid',
forceFit: true,
store: 'resultStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'ccuDesignation',
text: 'CCU Designation'
},
{
xtype: 'gridcolumn',
dataIndex: 'carrierName',
text: 'Carrier Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'dataPackageName',
text: 'Data package name'
},
{
xtype: 'gridcolumn',
dataIndex: 'bytesRx',
text: 'bytesRX'
},
{
xtype: 'gridcolumn',
dataIndex: 'bytesTx',
text: 'bytesTX'
}
],
viewConfig: {
}
},
{
xtype: 'panel',
title: 'Chart',
dockedItems: [
{
xtype: 'chart',
height: 250,
animate: true,
insetPadding: 20,
store: 'resultStore',
dock: 'top',
axes: [
{
type: 'Category',
fields: [
'ccuDesignation'
],
position: 'bottom',
title: 'CCU Designation'
},
{
type: 'Numeric',
fields: [
'bytesTx'
],
position: 'left',
title: 'Bytes'
},
{
type: 'Numeric',
fields: [
'bytesRx'
],
position: 'left',
title: 'Bytes'
}
],
series: [
{
type: 'line',
xField: 'x',
yField: [
'bytesTx'
],
smooth: 3
},
{
type: 'line',
xField: 'x',
yField: [
'bytesRx'
],
smooth: 3
}
],
legend: {
}
}
]
}
]
});
me.callParent(arguments);
}
});
i have read this at sencha:
// tab generation code
var index = 0;
while(index < 3){
addTab(index % 2);
}
function addTab (closable) {
++index;
tabs.add({
title: 'New Tab ' + index,
iconCls: 'tabs',
html: 'Tab Body ' + index + '<br/><br/>' + Ext.example.bogusMarkup,
closable: !!closable
}).show();
}
Ext.createWidget('button', {
renderTo: 'addButtonCt',
text: 'Add Closable Tab',
handler: function () {
addTab(true);
},
iconCls:'new-tab'
});
Ext.createWidget('button', {
renderTo: 'addButtonCt',
text: 'Add Unclosable Tab',
handler: function () {
addTab(false);
},
iconCls:'new-tab',
style: 'margin-left: 8px;'
});
But i don't have the var tabs in my script. So how can i add the tab to this:
Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
id: 'tabs',
activeTab: 1,
region: 'center',
items: [
{
xtype: 'gridpanel',
title: 'Reports',
forceFit: true,
store: 'ReportsStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'Type',
text: 'Type'
},
{
xtype: 'gridcolumn',
dataIndex: 'Description',
text: 'Description'
},
{
xtype: 'actioncolumn',
dataIndex: 'queryFields',
items: [
{
handler: function(view, rowIndex, colIndex, item, e) {
addTab;
alert('clicked');
},
altText: 'Open report',
icon: 'img/report-arrow.png',
tooltip: 'Open report'
}
]
}
],
viewConfig: {
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
iconCls: 'addReport',
text: 'Add report',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
}
]
}
]
}
]
}
]
});
me.callParent(arguments);
},
onButtonClick: function(button, e, options) {
Ext.create('MyApp.view.addReport').show();
}
});
var tabs = Ext.getCmp('tabs');
function addTab (closable) {
alert('yes');
tabs.add(Ext.create('MyApp.view.MyTabPanel2'));
}
How can i do this? I work with extjs designer 2

Answer 1

In that first view you've shown above, you are creating another tabpanel not an individual tab. If you tried to insert that into the tabpanel that you defined in your viewport you would have a tabpanel inside of another tabpanel. I don't think that is what you are trying to do.
You could create that first view above as an Ext.tab.Tab which contains the gridpanel or just create it as the gridpanel itself and include the tab config options in your add method call. To answer your question about referencing the tabpanel when you don't have it defined as a variable: you should just give it an id config (e.g. id: 'tabs') and then you can use Ext.getCmp('tabs'). For example:
// a piece of your viewport config
Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
activeTab: 1,
region: 'center',
id: 'tabs', // <-- include this config
// other configs...
Adding the tab could then be done like this:
// get a reference to the tab panel
var tabs = Ext.getCmp('tabs');
// if you create the view as a gridpanel you could do it like this
tabs.add({
title: sometitle,
iconCls: someicon,
closable: yayOrNay,
items: [Ext.create('MyApp.view.MyGridPanel')]
});
// OR if you create the view as an Ext.tab.Tab which already contains the gridpanel
tabs.add(Ext.create('MyApp.view.MyTab'));

Answer 2

Read And Use Following Code:
function allExpenseTypeReport(){
var reportByExpenseType=Ext.getCmp("reportByExpenseType");
if(reportByExpenseType==null){
reportByExpenseType = new Ext.tm.reports.ExpenseTypeReport({
title:WtfGlobal.getLocaleText("ec.reportbyexpensetype"),
layout:'fit' ,
closable: true,
iconCls:'pwnd tabreportsWrap',
id:"reportByExpenseType"
});
Ext.getCmp('as').add(reportByExpenseType);
}
Ext.getCmp("as").setActiveTab(Wtf.getCmp("reportByExpenseType"));
reportByExpenseType.doLayout();
}
Define Here:
Ext.tm.reports.ExpenseTypeReport = function(config){
Ext.apply(this, config);
Ext.tm.reports.ExpenseTypeReport.superclass.constructor.call(this, config);
Define your Code Here:
};