[CLOSED] Issue with Multiple Tabs (iframe) in TabPanel

  1. #1

    [CLOSED] Issue with Multiple Tabs (iframe) in TabPanel

    Hi,

    When you load multiple tabs at the same time. Randomly many of these tabs doesn't render well topbar items.

    I reproduced in this test case:

    TEST CASE

    ASPX
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:Panel runat="server" Layout="BorderLayout" Region="Center">
                    <Items>
                        <ext:Panel ID="PanelEast" runat="server" Width="225" Icon="BookOpen" Title="East Title"
                            Collapsible="true" Layout="FitLayout" Split="true" Region="West">
                            <Items>
                                <ext:Label runat="server" Text="some content" />
                            </Items>
                        </ext:Panel>
                        <ext:Panel ID="PanelCenter" runat="server" Width="225" Icon="BookOpen" Title="Center Title"
                            Collapsible="true" Layout="FitLayout" Split="true" Region="Center">
                            <Items>
                                <ext:TabPanel ID="tpMain" runat="server" Region="Center">
                                    <Items>
                                        <ext:Panel runat="server" Title="My Tab">
                                            <Loader runat="server" Mode="Frame" Url="/Area/Sample/Grid" DisableCaching="True" />
                                        </ext:Panel>
                                        <ext:Panel runat="server" Title="My Tab 2">
                                            <Loader runat="server" Mode="Frame" Url="/Area/Sample/Grid" DisableCaching="True" />
                                        </ext:Panel>
                                        <ext:Panel runat="server" Title="My Tab 3">
                                            <Loader runat="server" Mode="Frame" Url="/Area/Sample/Grid" DisableCaching="True" />
                                        </ext:Panel>
                                    </Items>
                                </ext:TabPanel>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    CONTROLLER
    
    
            public ActionResult Grid()
            {
                return View();
            }
    TAB CONTENT
    <script runat="server">
            public class SampleClass
            {
                public int Id { get; set; }
                public string Name { get; set; }
                public int State { get; set; }
            }
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!X.IsAjaxRequest)
                {
                    Store store = this.gridCounters.GetStore();
                    store.DataSource = new SampleClass[] { 
                        new SampleClass { Id=33,Name="Object with State 0",State=0 } , 
                        new SampleClass { Id=45,Name="Object with State 1",State=1 } , 
                        new SampleClass { Id=52,Name="Object with State 2",State=2 } 
                    };
                    store.DataBind();
                }
            }
        </script>
    <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:GridPanel ID="gridCounters" runat="server" Header="false" Border="false">
                    <TopBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:Button runat="server" Text="Sample button" Icon="Add"></ext:Button>
                                <ext:Button runat="server" Text="Sample button 2" Icon="Application"></ext:Button>
                                <ext:Button runat="server" Text="Sample button 3" Icon="Delete"></ext:Button>
                                <ext:Button runat="server" Text="Sample button 4" Icon="Disk"></ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Store>
                        <ext:Store ID="dsCounters" runat="server">
                            <Model>
                                <ext:Model runat="server" IDProperty="Id">
                                    <Fields>
                                        <ext:ModelField Name="Id" Type="Int" />
                                        <ext:ModelField Name="Name" Type="String" />
                                        <ext:ModelField Name="State" Type="Int" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column runat="server" DataIndex="Id" Text="Id" Hidden="true" Hideable="false" />
                            <ext:Column runat="server" DataIndex="Name" Text="Name" Width="200">
                                <Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
                            </ext:Column>
                            <ext:Column runat="server" DataIndex="State" Text="State" Width="200">
                                <Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
                            </ext:Column>
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:RowSelectionModel runat="server" SingleSelect="true" />
                    </SelectionModel>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
    What's wrong?
    Last edited by Daniil; Oct 26, 2012 at 11:42 AM. Reason: [CLOSED]
  2. #2
    Hi @softmachine2011,

    I think it is a layout issue.

    Setting up
    HideMode="Offsets"
    for the tabs should help.

    Also this TabPanel's option might be helpful in such cases.
    LayoutOnTabChange="true"
  3. #3
    Hi,

    With hideMode I solved this situation.

    I don't see LayoutOnTabChange property in TabPanel (ASPX), I have an older revision of Ext.NET 2.1 (rev. 4377), it was implemented later?
  4. #4
    Apologize, there is no such property in v2. It was in v1.

Similar Threads

  1. [CLOSED] Export To Excel with multiple tabs
    By Fahd in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 25, 2012, 2:01 PM
  2. [CLOSED] Advice for dynamic multiple tabs
    By mattwoberts in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 04, 2011, 10:18 AM
  3. Replies: 1
    Last Post: Dec 06, 2010, 8:51 AM
  4. [CLOSED] Multiple UserControls, Column and Tabs
    By CMA in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 15, 2010, 12:09 PM
  5. Open Multiple Tabs with CheckboxSelectionModel
    By simonmicheal in forum 1.x Help
    Replies: 0
    Last Post: May 29, 2009, 12:56 PM

Tags for this Thread

Posting Permissions