What's New?

[CLOSED] TabPanel Layout

Page 1 of 2 12 LastLast
  1. #1
    Feb 17, 2011, 5:01 PM

    [CLOSED] TabPanel Layout

    If Layout property can't be set on a TabPanel (assume this is because the tabpanel is using CardLayout itself?), what is the best way to set the layout for the tabpanel contents. In my example I'd like the tabpanel container to use "fit". Effect being panel=section1 below would fill the tab.

    Tabs.aspx
        
<ext:TabPanel ID="tabs" runat="server">
        <items>
            
            <ext:Panel ID="tab1" runat="server" Title="First Tab" Layout="Fit">
                <AutoLoad Url="tab1.aspx" Mode="IFrame" ShowMask="true" PassParentSize="true" ></AutoLoad>
            </ext:Panel>
            
            <ext:Panel ID="tab2" runat="server" Title="Second Tab" Layout="Fit">
                <AutoLoad Url="tab1.aspx" Mode="IFrame" ShowMask="true" PassParentSize="true" ></AutoLoad>
            </ext:Panel>
 
        </items>
    </ext:TabPanel>
    Tab1.aspx
        <ext:FormPanel ID="formpanel" runat="server" Layout="Fit">
        <items>
            
            <ext:Panel ID="section1" runat="server" Title="Section 1">
 
            </ext:Panel>
 
        </items>
    </ext:FormPanel>
    Last edited by Daniil; Mar 15, 2011 at 7:31 AM. Reason: [CLOSED]
  2. #2
    Feb 17, 2011, 5:17 PM
    Hi,

    You have to use ViewPort with fit layout inside Tab1.aspx because you load separate page inside iframe
  3. #3
    Feb 17, 2011, 5:56 PM
    Hi,

    In the code sample you posted, just change your <ext:FormPanel> to an <ext:Viewport> and things should start working better. Of course, if you need the <ext:FormPanel> for something, then place it inside an <ext:Viewport>.

    Example

    <ext:Viewport runat="server" Layout="Fit">
    <items>
        <ext:Panel ID="section1" runat="server" Title="Section 1">
        </ext:Panel>
    </items>
</ext:Viewport>
    Hope this helps.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  4. #4
    Feb 17, 2011, 8:05 PM
    Thanks,

    Any setting to have the iframe adjust? The container that the viewport is in seems to be my issue on resize..
  5. #5
    Feb 17, 2011, 8:08 PM
    Hi,

    Iframe is adjested already but content inside tab1.aspx is not adjusted therefore you have to use ViewPort inside iframe page.
    What issues do you have with ViewPort?
  6. #6
    Feb 17, 2011, 10:09 PM
    I've swapped out the formpanel for viewport, problem comes in when the browser is resized. Where if i opened tab1 as a stand alone page all is good, but not when inside tabpanel like example above.

    Click image for larger version.  Name: Examples_Tabs_aspx.png  Views: 638  Size: 7.7 KB  ID: 2318
  7. #7
    Feb 17, 2011, 10:51 PM
    Hi,

    Please try setting LayoutOnTabChange="true" on the <ext:TabPanel>. If that does not help solve the problem, you're going to have to post a code sample demonstrating how your parent (.aspx) and child (.ascx) are configured. We will need to be able to reproduce in our local test project.

    Hope this helps.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  8. #8
    Mar 04, 2011, 7:10 PM
    Hi, Sorry for the delay in my response, just now able to get back to this.

    Please try setting LayoutOnTabChange="true" on the <ext:TabPanel>.
    - I tried this, but no luck.

    Here is the 2 test files i'm working with:

    Tabs.aspx
    <%@ Page Language="VB" AutoEventWireup="false" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
     <ext:ResourceManager ID="ResourceManager1" runat="server" />
 
    <ext:TabPanel ID="tabs" runat="server" LayoutOnTabChange="true">
        <items>
            
            <ext:Panel ID="tab1" runat="server" Title="First Tab" Layout="Fit">
                <AutoLoad Url="tab1.aspx" Mode="IFrame" ShowMask="true" PassParentSize="true" ></AutoLoad>
            </ext:Panel>
            
            <ext:Panel ID="tab2" runat="server" Title="Second Tab" Layout="Fit">
                <AutoLoad Url="tab1.aspx" Mode="IFrame" ShowMask="true" PassParentSize="true" ></AutoLoad>
            </ext:Panel>
 
        </items>
    </ext:TabPanel>
 
</body>
</html>
    Tab1.aspx
    <%@ Page Language="VB" AutoEventWireup="false" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
 
          
            <ext:Viewport ID="formpanel" runat="server" Layout="Fit">
                <items>
            
                <ext:Panel ID="section1" runat="server" Title="Section 1">
 
                </ext:Panel>
 
            </items>
            </ext:Viewport>
 
 
</body>
</html>
  9. #9
    Mar 05, 2011, 8:47 AM
    Hi,

    Please set MonitoreResize="true" for TabPanel.

    Example
     <ext:TabPanel ID="tabs" runat="server" LayoutOnTabChange="true" MonitorResize="true">
  10. #10
    Mar 08, 2011, 6:19 PM

    Resolved

    That got it.. Thanks
Page 1 of 2 12 LastLast

Similar Threads

  1. TabPanel layout problem
    By m_bo in forum 1.x Help
    Replies: 0
    Last Post: Mar 19, 2012, 9:10 AM
  2. [0.8] Master with Tabpanel Layout
    By w0rtez in forum 1.x Help
    Replies: 4
    Last Post: Apr 05, 2011, 6:54 PM
  3. [CLOSED] Tabpanel fit layout issue
    By edigital in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Aug 30, 2010, 3:35 PM
  4. [1.0] Tabpanel + iframe + layout
    By SouthDeveloper in forum 1.x Help
    Replies: 0
    Last Post: May 13, 2010, 9:32 PM
  5. [CLOSED] [0.8.2] TabPanel layout problem
    By MarcA in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 10, 2010, 1:12 PM

Tags for this Thread

Posting Permissions