What's New?

[CLOSED] [#9] TabPanel Loader issue

Page 1 of 2 12 LastLast
  1. #1
    Oct 09, 2012, 3:06 PM

    [CLOSED] [#9] TabPanel Loader issue

    Hi,

    I don't know why exactly but, with this test case, if you collapse and expand west region, center region is reloaded doing a server call again.

    TEST CASE
    <!DOCTYPE html>
<html>
<head runat="server">
    <title>IconCombo - Ext.NET Examples</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 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>
    LOADER VIEW
    <script type="text/javascript">
        function checkHandler() {
            return false;
        }
    </script>
    <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.grid1.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="grid1" runat="server" Header="false" Border="false">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Sample button"></ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Store>
                    <ext:Store ID="store1" 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:ComponentColumn runat="server" DataIndex="State" Width="250" Text="State">
                            <Component>
                                <ext:RadioGroup runat="server" ID="State" GroupName="State">
                                    <Items>
                                        <ext:Radio runat="server" InputValue="0" BoxLabel="State0">
                                            <Listeners>
                                                <Change Fn="checkHandler" />
                                            </Listeners>
                                        </ext:Radio>
                                        <ext:Radio runat="server" InputValue="1" BoxLabel="State1">
                                            <Listeners>
                                                <Change Fn="checkHandler" />
                                            </Listeners>
                                        </ext:Radio>
                                        <ext:Radio runat="server" InputValue="2" BoxLabel="State2">
                                            <Listeners>
                                                <Change Fn="checkHandler" />
                                            </Listeners>
                                        </ext:Radio>
                                    </Items>
                                </ext:RadioGroup>
                            </Component>
                        </ext:ComponentColumn>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" SingleSelect="true" />
                </SelectionModel>
            </ext:GridPanel>
        </Items>
    </ext:Viewport>
    CONTROLLER
    public ActionResult Grid()
        {
            return View();
        }
    This behaviour doesn't reproduces in v1.x. Is there any thing I could do to avoid it?
    Last edited by Daniil; Dec 29, 2012 at 10:59 AM. Reason: [CLOSED]
  2. #2
    Oct 09, 2012, 5:08 PM
    Hi @softmachine2011,

    Thank you for the report! There is a simplified test case below.

    It looks like a browser reloads an iframe when the West region is expanded, because the Loader functionality seems to be not used - I tested with masking and a BeforeLoad listener.

    It needs to investigate why it gets reloaded.

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Viewport runat="server" Layout="FitLayout">
        <Items>
            <ext:Panel runat="server" Layout="BorderLayout">
                <Items>
                    <ext:Panel 
                        runat="server" 
                        Region="West" 
                        Width="200" 
                        Title="East"
                        Collapsible="true" />

                    <ext:Panel runat="server" Region="Center" Title="Center">
                        <Loader Mode="Frame" Url="Test.aspx">
                            <LoadMask ShowMask="true" />
                            <Listeners>
                                <BeforeLoad Handler="alert('BeforeLoad');" />
                            </Listeners>
                        </Loader>
                    </ext:Panel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
</body>
</html>
  3. #3
    Oct 09, 2012, 10:28 PM
    I notice that if use CollapseMode="Mini" for West region then the issue is gone
    I guess that BorderLayout makes some manipullation with dom elements (i mean move dom elements) during region expanding. Moving iframe element in DOM tree forces its reloading by browser
  4. #4
    Oct 10, 2012, 7:00 AM
    Well I understand that you are investigating this issue and when you have a fix or workaround with the same behaviour you will notify it to the thread.

    With collapseMode mini works but this isn't what I want.

    Thanks.
  5. #5
    Oct 10, 2012, 10:29 AM
    We think it is a bug. Reported to Sencha.
    http://www.sencha.com/forum/showthread.php?245536
  6. #6
    Oct 10, 2012, 11:49 AM
    Sencha opened a bug ticket. We will monitor.
  7. #7
    Oct 10, 2012, 2:20 PM
    Ok I'll expect for a response
  8. #8
    Oct 23, 2012, 2:58 PM
    Hi,

    Is there any progress or time-frame?
  9. #9
    Oct 24, 2012, 2:05 PM
    Hi @softmachine2011,

    Unfortunately, no.

    A bug lays deeply in a BorderLayout class. We have to wait a fix from Sencha.
  10. #10
    Oct 25, 2012, 10:49 AM
    Hi,

    @Animal of Sencha Team has writed in the post a workaround, could you try it with your framework?

    Possibly it could be the fix that we will expect from Ext.JS.

    Thanks
Page 1 of 2 12 LastLast

Similar Threads

  1. PDF open from TabPanel
    By moth1 in forum 1.x Help
    Replies: 4
    Last Post: May 21, 2014, 3:50 AM
  2. [CLOSED] Example Issue : Miscellaneous -> Bin_HtmlBin -> UserControl
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 12, 2012, 10:06 AM
  3. Issue Regarding to open a window in New Tab
    By Roshan in forum 1.x Help
    Replies: 0
    Last Post: Aug 06, 2012, 3:06 PM
  4. [CLOSED] How to keep all open tabs in the same line in tabpanel?
    By pdcase in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 23, 2011, 10:59 AM
  5. [OPEN] ComboBox Rendering issue
    By Timothy in forum Bugs
    Replies: 7
    Last Post: Sep 30, 2008, 5:33 PM

Posting Permissions