PDA

View Full Version : Why Child Tab Title Is Below the Main Tab Title?



frankpeng
16 Nov 2011, 7:38 AM
This is under MVC in extjs 4.

The app opens a main window with a "Main Tab". The "Open Case Search" button adds a child tab "Case Search (temp)". But, why the title of the 2nd tab doesn't stay in the tab?

Thanks

29336

Here is the code:



------------------This is from app.js:------------------

Ext.application({
name: 'SC',
appFolder: 'app',
controllers: [ 'Cases'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'mainpanel'

}
]
});
}
});

------------------This is from the main view, Main.js------------------
Ext.define('SC.view.Main', {
extend: 'Ext.tab.Panel',
alias : 'widget.mainpanel',
id: 'mainpanel_id',
frame: true,

initComponent: function() {
this.callParent(arguments);
},
items: [
{
title: 'Main Tab',
items: [
{
xtype: 'button',
text: 'Open Case Search',
action: 'casesearch'
},
{
xtype: 'button',
text: 'Remove'
}
]
}
]
});

------------------This is from another view, Case_search.js:------------------

Ext.define('SC.view.case_search.Case_search', {
extend: 'Ext.tab.Panel',
alias : 'widget.casesearch',
id: 'casesearch_id',
closable: true,

initComponent: function() {

this.callParent(arguments);
},
items: [
{
title: 'Case Search (temp)',
items: [

{
html: 'child tab'
}

]
}
]
});

------------------This is from controller, Cases.js:------------------
Ext.define('SC.controller.Cases', {
extend: 'Ext.app.Controller',
views: [
'Main' , 'case_search.Case_search'
],
init: function() {
this.control({

'casesearch button' :{
click: this.onCaseSearchBtnClick
}
});
},
onCaseSearchClick: function(btn) {

var mainpanel = Ext.getCmp('mainpanel_id');
var panel = Ext.getCmp('casesearch_id');

if(!panel){
var casesearchPanel = Ext.create('SC.view.case_search.Case_search');
panel = mainpanel.add(casesearchPanel);
}
mainpanel.setActiveTab(panel);
},
});

mitchellsimoens
16 Nov 2011, 1:17 PM
You don't have a title set for your SC.view.case_search.Case_search class.

frankpeng
16 Nov 2011, 1:20 PM
That worked. Thanks

frankpeng
16 Nov 2011, 1:27 PM
Per your suggestion, I moved up "title" section, which worked beautifully.

However, why is the tab (circled below) still there?
29346



h', {
extend: 'Ext.tab.Panel',
alias : 'widget.casesearch',
id: 'casesearch_id',
closable: true,
title: 'case search',

initComponent: function() {

this.callParent(arguments);
},
items: [
{
//title: '',
items: [

topSearchPanel, //Ext.form.Panel
{
xtype: 'bottomCaseResultGrid', //'Ext.grid.Panel
id: 'id2'
}

]
}
]
});
[/CODE]

droessner
16 Nov 2011, 2:00 PM
You are adding a tab panel to another tab panel. Change Case_search.js to extend Ext.panel.Panel instead of Ext.tab.Panel.

frankpeng
16 Nov 2011, 2:13 PM
Thanks. I didn't know only the first panel needs to be a tab.

That worked!