PDA

View Full Version : tab content initially missing



[WP]joju
Jan 13, 2010, 9:13 AM
please help, i have this tab of a tab panel inside a window with autoRender=false, the problem is that if i added the fitlayout (shown in bold)... the tab content (form panel) does not show when the tab is first activated... it will only appear after the window is resized...

i want to have the fitlayout (or if you can recommend any other layout it will be fine) so that that the tab will not render on page load




<ext:Tab ID="exttab" runat="server" Title=""
AutoScroll="true">
<Body>
<ext:FitLayout runat="server">
<ext:FieldSet ID="FieldSet5" runat="server" Title="" BodyStyle="padding: 10px 0 0 5px;"
StyleSpec="border:none" LabelWidth="350" AutoWidth="true" CollapseFirst="False" >
<Body>
<ext:ContainerLayout ID="ContainerLayout4" runat="server" >
<ext:FormPanel runat="server" TrackReset&#111;nload="true" ID="extfpnlCommonSettings" CollapseFirst="False" Border="False" LabelWidth="350">
<Body>
<ext:FormLayout ID="FormLayout3" runat="server" LabelWidth="350">
.......................... <anchors>
</ext:FormLayout>
</Body>
</ext:FormPanel>
</ext:ContainerLayout>
</Body>
</ext:FieldSet>
</ext:FitLayout>
</Body>
<Listeners>
<Activate Handler="" />
<Deactivate Handler="" />
</Listeners>
</ext:Tab>

Vladimir
Jan 13, 2010, 9:38 AM
Hi,

Does LayoutOnTabChange="true" for TabPanel help?
Also you can try manually to call doLayout for TabPanel (or for Tab) after window showing

[WP]joju
Jan 13, 2010, 9:53 AM
ok LayoutOnTabChange="True" did the trick... doesn't this slow down the process of tab activating?

geoffrey.mcgill
Jan 13, 2010, 2:21 PM
[WP]joju (1/13/2010) ok LayoutOnTabChange="True" did the trick... doesn't this slow down the process of tab activating?


Setting LayoutOnTabChange="true" will instruct the TabPanel to run the Layout logic (.doLayout) when the Tab index is changed. It may affect the speed of the Tab rendering, but would just depend on the complexity of the inner layout.

[WP]joju
Jan 14, 2010, 2:48 AM
ok , so probably the best way is just to call dolayout for the specific tab upon activation? and probably add single:true since this problem only happens on initial showing of the tab (after page load)

[WP]joju
Jan 14, 2010, 3:08 AM
another question... say i have this listener handler




<Activate Handler="if(!#{extchk}.isVisible()) params[0].doLayout(); togg.........



the activate event passes 1 argument to its function right? which is the activated panel itself... but why is it that params[0] is not existing or even p (panel).... i can only use this but how can i access the variable passed by the event itself other than using this? this is just a question for use on listeners passing multiple parameter to its function

like the listener for beforetabchanged




<BeforeTabChange Handler="if (#{exttpnlMain}.getActiveTab() &amp;&amp; #{exttpnlMain}.getActiveTab().id == #{exttabCommon}.id) { if(!checkIfModified('common','tabchange',(newTab|| ''))) ...........


i tried using newTab since it is shown in the extjs api, but why is the variable "p" not working in the tab activate handler

beforetabchange (http://www.extjs.com/deploy/dev/docs/source/TabPanel.html#event-Ext.TabPanel-beforetabchange) :
( <code>TabPanel this</code>, <code>Panel newTab</code>, <code>Panel currentTab</code> )
<div class="short">Fires before the active tab changes. Handlers can return false to cancel the tab change.

activate (http://www.extjs.com/deploy/dev/docs/source/Panel.html#event-Ext.Panel-activate) :
( <code>Ext.Panel p</code> )
<div class="short">Fires after the Panel has been visually activated.
Note that Panels do not directly support being activated, but some...
Fires after the Panel has been visually activated.
Note that Panels do not directly support being activated, but some Panel subclasses
do (like Ext.Window (http://www.extjs.com/deploy/dev/docs/output/Ext.window.html)). Panels which are child Components of a TabPanel fire the
activate and deactivate events under the control of the TabPanel.

geoffrey.mcgill
Jan 14, 2010, 3:18 AM
Try using 'el' instead of 'p'.

There is some inconsistencies in ExtJS with the primary element parameter name. We've standardized on 'el', which should always be an instance of 'this', which is the Component the event is being fired upon.


Hope this helps.