How to change tabPosition

[Mark]

Since several days I tried to find a solution to set the tabPosition (= 'top' ) of a tabarea which is dynamiclly inserted each time when a gridrow is clicked.
My Example :http://crm.auragard.de/layout.html (http://crm.auragard.de/)


This code build the tabs on the fly



var tabs = new Ext.TabPanel('panel_'+x, {
resizeTabs:true, // turn on tab resizing
minTabWidth: 50,
maxTabWidth:200,
preferredTabWidth:190 ,
tabPosition:'top',
fitToFrame:true
});
var addressTab = tabs.addTab('address_'+x, 'Adresse');
var addressTabUpdater = addressTab.getUpdateManager();
addressTabUpdater.setDefaultUrl(dir+'address.php?id='+x);
addressTab.on('activate', addressTabUpdater.refresh, addressTabUpdater, true);

var bankingTab = tabs.addTab('banking_'+x, 'Bankverbindung');
var bankingTabUpdater = bankingTab.getUpdateManager();
bankingTabUpdater.setDefaultUrl(dir+'banking.php?id='+x);
bankingTab.on('activate', bankingTabUpdater.refresh, bankingTabUpdater, true);


var salesTab = tabs.addTab('sales_'+x, "Faktura");
var salesTabUpdater = salesTab.getUpdateManager();
salesTabUpdater.setDefaultUrl(dir+'sales.php?id='+x);
salesTab.on('activate', salesTabUpdater.refresh, salesTabUpdater, true);

var contactTab =tabs.addTab('contact_'+x, 'Kontakte');
var contactTabUpdater = contactTab.getUpdateManager();
contactTabUpdater.setDefaultUrl(dir+'contact.php?id='+x);
contactTab.on('activate', contactTabUpdater.refresh, contactTabUpdater, true);

var documentTab =tabs.addTab('document_'+x, 'Dokumente');
var documentTabUpdater = documentTab.getUpdateManager();
documentTabUpdater.setDefaultUrl(dir+'document.php?id='+x);
documentTab.on('activate', documentTabUpdater.refresh, documentTabUpdater, true);

var inventaryTab =tabs.addTab('inventary_'+x, 'Inventar');
var inventaryTabUpdater = inventaryTab.getUpdateManager();
inventaryTabUpdater.setDefaultUrl(dir+'inventary.php?id='+x);
inventaryTab.on('activate', inventaryTabUpdater.refresh, inventaryTabUpdater, true);

var contractTab =tabs.addTab('contract_'+x, 'Verträge');
var contractTabUpdater = contractTab.getUpdateManager();
contractTabUpdater.setDefaultUrl(dir+'contract.php?id='+x);
contractTab.on('activate', contractTabUpdater.refresh, contractTabUpdater, true);

var historyTab =tabs.addTab('history_'+x, 'Historie');
var historyTabUpdater = historyTab.getUpdateManager();
historyTabUpdater.setDefaultUrl(dir+'history.php?id='+x);
historyTab.on('activate', historyTabUpdater.refresh, historyTabUpdater, true);

var mapTab =tabs.addTab('map_'+x, 'Google Map');
var mapTabUpdater = mapTab.getUpdateManager();
mapTabUpdater.setDefaultUrl(dir+'map.php?id='+x);
mapTab.on('activate', mapTabUpdater.refresh, mapTabUpdater, true);

addressTab.activate();
}
}
Ext.EventManager.onDocumentReady(TabsDetails.init, TabsDetails, true);
This is the part of the script which loads the tabs into a ContentPanel:


grid.on('rowclick', function(grid, rowIndex, e) {

var id = ds.data.items[rowIndex].id;
var entry = layout.getRegion('center').getPanel(id);

if(!entry){

var url = 'panelTab.php?KuNr='+id;
Ext.DomHelper.append('detailView', {
tag: 'div',
id : "panel_"+id
});

innerLayout.add('center',new Ext.ContentPanel(
"panel_"+id,
{title:"<img src='resources/images/detail.png' border=0 align='absmiddle'>&nbsp;Kartei ["+ ++idx+"]",
url: {
url:url,
scripts:true,
},
loadOnce: true,
autoScroll: false ,
fitToFrame:true,
closeOnTab: true,
closable:true,
loadMask:true
}));
} else {
layout.showPanel(entry);
}

})


var layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 32,
titlebar: false
},
west: {
split:true,
initialSize: 220,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 400
},

center: {
autoScroll: false
}
});
layout.beginUpdate();

layout.add('west', new Ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true, closable:false}));

var innerLayout = new Ext.BorderLayout('content', {

east: {

split:true,
initialSize: 220,
titlebar: true,
collapsible: true,
animate: true,
minSize: 100,
maxSize: 400

},
center: {

fitToFrame:true,
autoScroll:true,
resizeTabs: true,
minTabWidth: 80,
preferredTabWidth: 120,
tabPosition:'bottom',
closeOnTab: true
}
});
innerLayout.add('center', new Ext.GridPanel(grid, {title:"<center><img src='resources/images/liste.png' border=0 align='absmiddle'>&nbsp;Liste</center>"} ));
innerLayout.getRegion('center').showPanel('listView');
innerLayout.add('east',new Ext.ContentPanel('east',{title:"Kategorie",closable:false}) );
layout.add('center',new Ext.NestedLayoutPanel(innerLayout) );

layout.endUpdate();
It seems that the settings of the BorderLayout influences the behavior of the nested tabs. I've read the docs over and over again and finally I understood that the tab obtions has to be set in a "Region"!
Again I tried to build a nested/nested Layout, which works quite well without any errors but the expected effect failed.:s

Could anybody give me a hint, please?

[tryanDLS]

This thread (http://extjs.com/forum/archive/index.php/t-336.html) applies to the old .33 style defs, but it may give you a start - I think other than changing the css prefix from 'y' to 'x-' the classes are the same.

[Mark]

Hi tryanDLS, thank you for the reply! I will do my best!~o)

[Mark]

First,the rewritten css you've pointed me, seems to belong to an older version of ext. The classes which were used there are not the same classes I found in the ext-all.css even when I change the "y"!

But your hint prompted me to dig deeper into css and core. Now I'm wondering if this strange behavior, which is shown to the tabPosion of nested Layouts, is probably a bug ?

Since my last post I'd tried a lot of scenarios, but my js skills are not nearly good enough to overlook the complexity of this great work of Jack and Co. nor to verify a bug.

So, it would be very nice, if you would tell me, if this is a known bug or simply an exotic feature I requested? :-/

Thank you,

Mark

I forgot to tell you, that if I change the tabposition of the Regions, it works quite well.

[mystix]

see this thread (http://extjs.com/forum/showthread.php?t=9108) (1.1 RC1)