PDA

View Full Version : Tab problems, please help me.



Absalom
22 Aug 2007, 8:19 AM
I have three problems with my tabs. I've been trying to solve this for a couple of days now. Its driving me mad! :((

First, my center panel has tabs that are dynamicly created. Each of these tabs contains tabs. The problem is these inner tabs arnt stretched to match the center regions height. The first level of tabs are, but not the second.

Second, I've set the center region to 'autoscroll: false' since I dont want the whole region to scroll, just the second level of tabs. But now there's no scrolling at all going on.

Third, the content of my second level tabs are loaded by using an updater, works fine except that special characters are replaced by a little box. If I browse directly to the url used the chars works. The chars also work if I write them directly into my application.


Please let me know if u think some code will help.

Absalom
22 Aug 2007, 12:35 PM
TTT

Absalom
23 Aug 2007, 1:41 AM
Anyone? Ive searched and experimented, I cant understand how to solve it. :s

fay
23 Aug 2007, 2:42 AM
Will you post your code.

Absalom
23 Aug 2007, 3:44 AM
Ok, lets see:

Layout creation:



Viewport = function(){
var layout;
function createBorderLayout(){
layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 55,
titlebar: false
},
center: {
titlebar: false,
autoScroll: false,
alwaysShowTabs: true,
resizeTabs: true,
closeOnTab: true,
tabPosition: 'top'
},
south: {
split:false,
initialSize: 25,
titlebar: false
}
});
}
return {
init : function(){
createBorderLayout();
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('north', 'North'));
layout.add('center', new Ext.ContentPanel('tab-public', {title: 'Public', closable: false}));
layout.add('south', new Ext.ContentPanel('south', 'South'));
layout.getRegion('center').showPanel('tab-public');
layout.endUpdate();
},
createCenterTab : function(id, title){
Ext.DomHelper.insertAfter('tab-public', {
tag: 'div',
id: id
})
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel(id, {title: title, closable: true},
[
'<div class=\"xp\"></div>'
].join(\"\")
));
layout.endUpdate();
},
switchCenterTab : function(id){
layout.beginUpdate();
layout.getRegion('center').showPanel(id);
layout.endUpdate();
}
};
}();





Part of a grid, calls the above function "createCenterTab" and then creates 2nd level of tabs:


grid.on('rowdblclick', function(grid, rowIndex, e) {
newPanelId = 'tab-user' + ds.getAt(rowIndex).data.id;
if (Ext.get(newPanelId)) {
Viewport.switchCenterTab(newPanelId);
}else{
Viewport.createCenterTab(newPanelId, ds.getAt(rowIndex).data.name);
var newTabs = new Ext.TabPanel(Ext.get(newPanelId).child('.xp'));
var tab1 = newTabs.addTab(newPanelId + '-tab1', 'Profile');
var updater1 = tab1.getUpdateManager({disableCaching:true, loadScripts: true});
updater1.update('http://www.xxxxxx.com/users/index/id/' + ds.getAt(rowIndex).data.id);
newTabs.activate(newPanelId + '-tab1');
}
});




Markup:


<div id=\"container\">
....
<div id=\"tab-public\" class=\"x-layout-inactive-content\">
<div class=\"xp\"></div>
</div>
....
</div>

Absalom
23 Aug 2007, 3:51 AM
This is what it looks like in Firebug, especially relevant to the first question:



<div id="ext-gen30" class="x-layout-panel-body x-tabs-top" style="overflow: hidden; height: 347px;">
<div id="ext-gen31" class="x-tabs-wrap">
<div class="x-tabs-strip-wrap">
</div>
</div>
<div id="tab-body34" class="x-tabs-body x-layout-tabs-body" style="overflow: hidden; position: relative; height: 325px;">
<div id="subtab-user9" class="x-layout-active-content x-tabs-item-body" style="display: block; visibility: visible; position: relative;">
<div id="ext-gen295" class="xp x-tabs-top">
<div id="ext-gen296" class="x-tabs-wrap">
<div class="x-tabs-strip-wrap">
</div>
</div>
<div id="tab-body299" class="x-tabs-body" style="position: relative;">
<div id="subtab-user9-tab1" class="x-tabs-item-body" style="display: block; visibility: visible; position: relative;">
</div>
</div>
</div>
</div>
<div id="tab-public" class="x-layout-active-content x-tabs-item-body" style="display: block; visibility: hidden; position: absolute; left: -20000px; top: -20000px;">
</div>
</div>
</div>



tab-body34 is getting the full height, ext is setting some css-height for it. The children does not stretch.

Absalom
24 Aug 2007, 9:05 AM
TTT

Absalom
26 Aug 2007, 7:45 AM
Anyone? I feel bad for bumping the thread. The answers to these questions just gotta be useful for more than me.

jsakalos
26 Aug 2007, 1:02 PM
The best would be to prepare a full html page plus javascript file that can be dropped into extjs/examples that would show the problem. Or a public link.

Absalom
1 Sep 2007, 10:45 AM
Ok, will try to make that asap.