PDA

View Full Version : tabpanel insert empty panel



Cougar84
16 Mar 2012, 1:04 AM
I've a strange situation with a Ext.tab.Panel ...

I'm try to insert a panel into a Tab Panel, but the tab is created, but it's empty ... totally empty ... no items inside ... it's 2 days I work on that ... maybe it's a simple thing that I don't see ...



var newTab = pannello.insert( pannello.items.length - 1, {
title: store.getById(valCombo).get('DesSoc'),
azienda: valCombo,
name: 'tabAzienda',
hideMode: 'visibility',
layout: 'fit',
border: 0
});

newTab.add({
xtype: 'centerpanel'
});

pannello.setActiveTab(newTab);

pannello.doLayout();

newTab.show();



Would you help me plz ... i'm going crazy with this!!! :((

tvanzoelen
16 Mar 2012, 2:26 AM
Is the xtype recognized? What is the centerpanel?

You could try just to add a normal panel first. If that works, you know there is a problem with the xtype you created.

Cougar84
16 Mar 2012, 2:28 AM
"Is the xtype recognized? What is the centerpanel?"
Of course is recognized ... it's used in another tab ...
it's a panel widget extended ...


"You could try just to add a normal panel first. If that works, you know there is a problem with the xtype you created."

Doesn't work either ...

tvanzoelen
16 Mar 2012, 2:38 AM
Can you create a small sample like this? With code of the centerpanel.



Ext.onReady(function() {

var tabpanel = new Ext.tab.Panel({

renderTo: Ext.getBody(),
width: 400,
height: 400

});

var newTab = tabpanel.insert(tabpanel.items.length - 1, {
title: 'test',
name: 'test',
hideMode: 'visibility',
layout: 'fit',
border: 0
});

newTab.add({
xtype: 'panel',
html: 'text'
});

tabpanel.setActiveTab(newTab);


});


This sample works in the 4.1 RC, so I am interested what is going on in that centerpanel.

Cougar84
16 Mar 2012, 2:57 AM
You're example works ...

but I've tried to put a normal panel instead centerpanel on my example:



newTab.add({
xtype: 'panel',
html: 'prova'
});


And doesn't work ...

So the problem probably isn't in the centerpanel ...

tvanzoelen
16 Mar 2012, 3:02 AM
I can not do much if you do not give me your example. I need a full example of your case wich shows the problem, with launch/Ext.onReady included.

Cougar84
16 Mar 2012, 3:09 AM
This openSoc function is called by click event of a button ...


openSoc: function() {

var store = this.down('combo[name="cboAzienda"]').getStore();


// Riferimento al pannello delle aziende
var pannello = this.tabpanel.up("#Aziende");

// Prelevo il valore dalla combo
var valCombo = this.down("form").getValues().cboAzienda;

// Cerco nei pannelli se c'Ŕ giÓ un pannello aperto con l'azienda selezionata
if (pannello.down('panel[azienda="' + valCombo + '"]') != null) {
// Ci sono dei pannelli

Ext.Msg.alert(IA.Labels.appTitle, "L'azienda: " + store.getById(valCombo).get('DesSoc') + " Ŕ giÓ aperta!!");

} else {

this.returnFocus = false;

var newTab = pannello.insert( pannello.items.length - 1, {
title: store.getById(valCombo).get('DesSoc'),
azienda: valCombo,
name: 'tabAzienda',
hideMode: 'visibility',
layout: 'fit',
border: 0
});

newTab.add({
xtype: 'panel',
html: 'prova'
});

pannello.setActiveTab(newTab);


pannello.doLayout();

newTab.show();

this.close();

}


}


This is the MainWindow:



Ext.define('IA.view.main.MainWindow', {
extend: 'Ext.container.Viewport',
alias : 'widget.mainwindow',


id: 'MainWindow',

title : 'Intranet',
layout: 'fit',

maximized: true,

autoShow: true,

iconCls: 'appIcon',

initComponent: function() {
this.items = [
{
xtype: 'tabpanel',
id: 'Aziende',


layout: 'fit',
border: 0,

hideMode: 'visibility',


items: [
{
id: 'MainHeader',
xtype: 'panel',

name: 'tabAzienda',

azienda: "",

hideMode: 'visibility',

tabConfig: {
title: 'BlaBlaBla'
},

layout: 'fit',
border: 0,

items: [
{
xtype: 'centerpanel'
}
]
},{
title: '+',
xtype: 'addtab',
hideMode: 'visibility'
}
]
}

];

this.callParent(arguments);
}
});

tvanzoelen
16 Mar 2012, 3:14 AM
xtype: 'tabpanel',
id: 'Aziende',


layout: 'fit',
border: 0,


First that layout fit on a tabpanel??? Tabpanel has a card layout else setActiveTab will never work. Can you try again and remove that layouy from the tabpanel?

Cougar84
16 Mar 2012, 3:20 AM
I've removed the layout but the insert still fail ... :(

Cougar84
16 Mar 2012, 3:29 AM
The insert don't give me any error ...
it creates the tab with the right title and the right properties, but no item is rendered inside ...

Inspecting DOM of the newTab element after insert is empty ...

tvanzoelen
16 Mar 2012, 4:19 AM
newTab.insert(0, {
xtype: 'panel',
html: 'prova'
});


In the docs I saw skirtle saying something fixed in 4.1 see insert.

Cougar84
16 Mar 2012, 5:13 AM
I've also tried this:



newTab = pannello.add( {
xtype: 'panel',
html: 'test'
});


and doesn't work either ...

And it's strange because I use the add method in other part of my app and works well ...

The openSoc function start from click event of a button on a modal window ...

For the docs I can't find the skirtle comment in the Ext.tab.Panel ...

khmurach
16 Mar 2012, 6:58 AM
Demo http://ext4all.com/post/how-to-dynamically-add-tabs-to-tabpanel

Cougar84
16 Mar 2012, 7:10 AM
newTab = pannello.add(Ext.widget('panel', {
title: 'New Tab ',
html: 'Html '
}))


nothing too ...

I think isn't the way to add the panel, but something else ...

tvanzoelen
16 Mar 2012, 8:05 AM
Its strange. I got it reproduced with the sample below. No text appears on tab test. Seems like a bug.




Ext.onReady(function() {

var tabpanel = new Ext.tab.Panel({

renderTo: Ext.getBody(),
width: 400,
height: 400,
hideMode: 'visibility',
items: [
{
id: 'MainHeader',
xtype: 'panel',
hideMode: 'visibility',
tabConfig: {
title: 'Blablabla'
},
layout: 'fit',
items: [
{
xtype: 'panel'
}
]
}, {
title: '+',
xtype: 'panel',
hideMode: 'visibility'
}
]
});

var newTab = tabpanel.insert(tabpanel.items.length -1, {
title: 'test',
azienda: undefined,
name: 'test',
hideMode: 'visibility',
layout: 'fit',
border: 0
});

newTab.add({
xtype: 'panel',
html: 'text'
});

tabpanel.setActiveTab(newTab);


});

tvanzoelen
16 Mar 2012, 8:09 AM
Now its working.



Ext.onReady(function() {

var tabpanel = new Ext.tab.Panel({

renderTo: Ext.getBody(),
width: 400,
height: 400,
items: [
{
id: 'MainHeader',
xtype: 'panel',
// hideMode: 'visibility', <--this one is causing the trouble
tabConfig: {
title: 'Blablabla'
}
}, {
title: '+',
xtype: 'panel'

}
]
});

var newTab = tabpanel.insert(tabpanel.items.length -1, {
title: 'test',
azienda: undefined,
name: 'test',
layout: 'fit',
border: 0
});

newTab.add({
xtype: 'panel',
html: 'text'
});

tabpanel.setActiveTab(newTab);


});

In your case




id: 'MainHeader',
xtype: 'panel',

name: 'tabAzienda',

azienda: "",

//hideMode: 'visibility', <--- comment this one out

tabConfig: {
title: 'BlaBlaBla'
},