PDA

View Full Version : problem with TabPanel



Tomek
10 Oct 2009, 10:21 PM
Hello,

I've got a strange problem with TabPanels. I've got a main TabPanel and in each tab I create a new TabPanel and add tabs dynamically. The problem is that the TabScroll (in TabPanels in the second row) shows only if I close one of a tab.



Ext.onReady(function(){



tabsLayers = new Ext.TabPanel({
region: 'west', // a center region is ALWAYS required for border layout
deferredRender: false,
autodestroy:true,
height: 200,
width:200,
enableTabScroll:true,
defaults: {autoScroll:true}
});//tabs


prepareTabs();




function addPanel2(i){
//if(tabs.getItem('panel_'+title)==null) {
var newAccItem = new Ext.Panel({
id: "zak?adka"+i,
title: "zak?adka"+i,
//autoScroll: true
});

return newAccItem;

};//addPanel2


function prepareTabs(){
var newAccItem,rob;
for ( i=0; i<10; i++){

newAccItem = addPanel2(i);//tworze zak?adke
//console.log(i);
rob = addChildTabs(i);
newAccItem.add(rob);//dodaje podzakladki

newAccItem.doLayout();
tabsLayers.add(newAccItem);

}
tabsLayers.doLayout();
};




function addChildTabs(i){
rob2 = new Ext.TabPanel({
//region: 'center',
deferredRender: false,
width:150,
height: 200,
enableTabScroll: true,

defaults: {autoScroll:true}
});

for(var j=0; j<10; j++){
//console.log(layers[subLayerIds[j]].name);
//console.log(i+" "+j);
rob2.add(new Ext.Panel({
title: "zak?adka"+i+j,
autoScroll:true,
closable: true
}));
rob2.doLayout();
}
return rob2;

};
new Ext.Viewport({
layout:'border',
items:[tabsLayers, {region:'center',contentEl:'center2'}]

});everything works fine, I had to remove
deferredRender: false

Why it doesn't work with differedRender option?

Jack9
12 Oct 2009, 9:49 AM
Ext.onReady(function(){

var tabsLayers = new Ext.TabPanel({
region: 'west',
//deferredRender: true, // This is the default
autodestroy:true,
activeTab: 0,
height: 200,
width:200,
enableTabScroll:true,
defaults: {autoScroll:true}
});//tabs

prepareTabs(tabsLayers);

var main = new Ext.Viewport({
layout:'border',
title:'MainPanel',
items:[
tabsLayers,
{
region:'center',
contentEl:'center2'
}
]
});
main.render(document.body);
});

function prepareTabs(tabsLayers){
for ( i=0; i<10; i++){
var subTabs = addChildTabs(i);
tabsLayers.add(
new Ext.Panel({
id: "Tab"+i,
title: "Tab"+i,
items:[
subTabs
]
})
);
}
};

function addChildTabs(i){
var rob2 = new Ext.TabPanel({
width:150,
height: 200,
enableTabScroll: true,
defaults: {autoScroll:true}
});

for(var j=0; j<10; j++){
rob2.add(
new Ext.Panel({
title: "SubTab"+i+j,
autoScroll:true,
closable: true
})
);
}
rob2.doLayout();
return rob2;
};
With HTML similar to:


...
</head>
<body>
<div id="center2"></div>
</body>
</html>
This ext works fine for me. Putting in deferred render false in the main tab panel, does create the problem you described. It must be something to do with how tabscrolling is implemented, wherein it checks for width on layout change and I think deferred rendering puts the tabs down immediately, creating a situation where only the first tab gets the benefit.