PDA

View Full Version : Components on TabPanel, layout problem



Zdeno
4 Mar 2010, 3:30 AM
Same as wrote acesfull:

I have searched several posts relating to FormPanels in a tab of a TabPanel and have not found a solution that works.

I solve this problem with form when i set up fixed height of form.

Next issue if are using treepanel with mask on TabPanel: you can set up with, height but mask is loading in left top corner of TabPanel. Btw if you are testing layout and set up ActiveTab to 2 or so, you need to change CSS for this Tab when you change ActiveTab back to 0.

I tried ways like doLayout function when tab is activated and other, but nothing work. Did anyone solved this problem or how you can do application with ExtJS without patching CSS on elements what are on non-Active tabs?

Animal
4 Mar 2010, 3:44 AM
Use hideMode: 'offsets' on your tabs.

Also, do not overnest.

But of course we have no idea what you are doing because you show no code.

Zdeno
4 Mar 2010, 5:29 AM
I tried to use hideMode too, same like



layoutOnTabChange: true,
forceLayout: true,


but without success. I just fixed it in CSS for every treepanel element but as you can see dont have fixed loading mask yet.

Here is code example:



var formtabs = new Ext.TabPanel({
renderTo: 'formtabs',
cls: "auto-width-tab-strip",
activeTab: 0,
frame:true,
defaults:{ autoHeight: true, autoWidth: true, hideMode: 'offsets' },
layoutOnTabChange:true,
items:[
{contentEl:'basic', title: 'Detail>' }
,{contentEl:'summary', title: 'Summary', hideMode: 'offsets'}
,{contentEl:'mailing', title: 'Mailing', hideMode: 'offsets' }
,{contentEl:'crossaccess', title: 'Cross access', hideMode: 'offsets'}
,{contentEl:'finance', title: 'Finance', hideMode: 'offsets'}
]
});
formtabs.doLayout();

var tabs = new Ext.TabPanel({
renderTo: 'tabs1',
activeTab: 0,
autoTabs : true,
width:860,
border:true,
frame: true,
defaults:{ autoHeight: true },
layoutOnTabChange: true,
forceLayout: true,
items:[
{contentEl:'team-manage-tab', title: 'Manage teams', hideMode: 'offsets' },
{contentEl:'project-os-tab', title: 'Project OS', hideMode: 'offsets' },
{contentEl:'team-rights-tab', title: 'Team rights', hideMode: 'offsets' }
]
});




<div id="formtabs">
<div id="basic" class="x-hide-display blue-background">
</div>
<div id="summary" class="x-hide-display blue-background">
</div>
<div id="mailing" class="x-hide-display blue-background">
<div id="tabs1">
<!-- tab 2 //-->
<div id="project-os-tab" class="x-hide-display os-panel" style="background-color: #deecfd">
<div class="users-tree-cover">
<div class="users-search-box-label floatleft">Search Field>:</div>
<div id="users-search-box" class="floatright"></div>
</div>
<div id="users-tree" class="floatleft"></div>
<div id="users-sorted-to-teams" class="floatleft"></div>
<div class="users-import-box-cover">
<div class="users-import-label">Organisation structure import:</div>
<div style="float: left; margin-left: 10px; margin-right: 12px;"><input type="text" id="users-import-box" name="users-import-box" size="40"/></div>
<div id="users-import-button"></div>
</div>
<div style="clear: both;">&nbsp;</div>
</div>
<!-- tab 1 //-->
<div id="team-manage-tab" class="x-hide-display os-panel" style="background-color: #deecfd">
<div id="team-add-form-box"></div>
<div id="teams-tree" class="floatleft"></div>
<div class="team-import-box-cover">
<div class="team-import-label">Team import:</div>
<div style="float: left; margin-left: 10px; margin-right: 12px;">
<input type="text" id="team-import-box" name="team-import-box" size="40"/>
</div>
<div id="team-import-button"></div>
</div>
<div style="clear: both;">&nbsp;</div>
</div>
<!-- tab 3 //-->
<div id="team-rights-tab" class="x-hide-display os-panel" style="background-color: #deecfd">
<div style="margin: 0 7px 15px 7px;">
<table cellpadding="3" cellspacing="1" class="table-ext" id="table-team-users-rights">
</table>
</div>
<div style="float: right; padding: 0 8px 7px 0">
<a href="#" onclick="return refresh_user_rights();" class="refresh-link-ext">
Reload teams
<img style="vertical-align: middle;" src="/lib/extjs/resources/images/default/grid/refresh.gif"/>
</a>
</div>
<div style="float: right; padding: 0 5px 7px 0;">
<a href="#" onclick="return save_all_rights();" class="saveall-link-ext">
Save all user rights
<img style="vertical-align: middle;" src="/images/saveall-16.png"/>
</a>
</div>
<div style="clear: both;">&nbsp;</div>
</div>
</div>
</div>
<div id="crossaccess" class="x-hide-display blue-background">
</div>
<div id="finance" class="x-hide-display blue-background">
</div>
</div>


I tried put hideMode to tabPanel config or defaults config too.

In attachment you can see loading dialog. Im sorry for Czech language in picture.

Animal
4 Mar 2010, 5:35 AM
What are you asking now?

You are not using layouts within each tab. You are using dead HTML.

Zdeno
4 Mar 2010, 6:01 AM
So you have got only two ways? Use layout or HTML styling? But why is layout of treepanels/forms on non-active tab broken? Does component count with layout only and if you render it to HTML element, it doesnt calculate position/width/height etc?

Animal
4 Mar 2010, 6:13 AM
It's not "broken". You are not using layout. You are using contentEl. Which just pulls in a pure HTML element. No layout is performed.

Forget contentEl, forget HTML.

Add Components to Containers (with layouts). That is all.

Zdeno
4 Mar 2010, 6:25 AM
Thank you for help now i know what to do when ill re-design this application. :)