PDA

View Full Version : Viewport -> Tabpanel -> Borderlayout nesting problem



neongrau
12 May 2010, 1:51 AM
hi there!

I'm struggling to get a borderlayout into a tab.
The problem is that the borderlayout doesnt show up (just a 2px border on top is visible)

Most likely this is just a small little mistake i cannot see.


new Ext.Viewport({
renderTo: document.body,
layout: 'border',
items: [{
title: 'TEST',
tbar: new Ext.Toolbar({items: [{text:'Button'}] }),
region: 'center',
id: 'center-region-container',
hideBorders: true,
items: {
xtype: 'tabpanel',
bodyBorder: false,
activeTab: 2,
items: [
{ title:'Tab 1', items: [] },
{ title:'Tab 2', items:[] },
{ title:'Tab 3',
items: [
{
layout:'border',
items: [ {region:'east', width:300, html:'inner east' }, {region:'center', html:'inner center' }]
}
]
}
]
},
margins: '5 5 5 5'
}]
});

any idea what's wrong here?

Animal
12 May 2010, 2:00 AM
Why a border layout for the Viewport if you only want ONE child?

Is there another, simpler layout which fits a single child into the available space? I'll leave that as an exercise for you.

Anyway. How are you hoping that the title: 'TEST' Panel is going to size its child, the TabPanel?

And. Tab 3 is a NO LAYOUT panel, CONTAINING a border layout Panel.

Come on. You've been here long enough to know this stuff.

neongrau
12 May 2010, 2:11 AM
thanks for the fast reply

well, tbh i only have experience with the now 'ancient' ExtJS 1.x and lately i was just using Ext Core where no Layouts/Panels exist.
The whole xtype/layout stuff is completely new to me.

Animal
12 May 2010, 2:20 AM
The API docs explain the whole concept.

neongrau
12 May 2010, 2:36 AM
well, that didn't really help. but anyway i got to work on s.th. different for the rest of the week, i may get back to ask again next week.

Animal
12 May 2010, 2:46 AM
I have helped. I spent HOURS fully explaining the concept and configs involved in layouts in the API docs. HOURS typing explanations.

I'm not copy/pasting it over to here. You go there.

neongrau
12 May 2010, 3:45 AM
~o) man relax, why so irritated?

i got stuck on this issue last friday. and i'm generally not posting in this forum until i really tried everything.

http://www.extjs.com/deploy/dev/docs/ is my homepage.

i've read the FAQ part on layouts, i've read anything in API docs with layout in it but i couln't find anything that would explain what the problem was.


"Why a border layout for the Viewport if you only want ONE child?"
because this is a cut down version, not much sense in posting 300 lines of code.


"Is there another, simpler layout which fits a single child into the available space? I'll leave that as an exercise for you."
since i coulnd't find out what layout you were talking about i tried a variety but had no luck (all that happened was the 5px margin vanished).


"Anyway. How are you hoping that the title: 'TEST' Panel is going to size its child, the TabPanel?"
well that's obviously the problem.

...in fact i got it working now by adding
layout: 'fit' to the tab and to the viewports first child

i think i should get back to explicitly instantiate the stuff instead of using layout/xtype as i don't seem to get along with them too well.