[FIXED] [#847] [3.2.1] Layout stops updating after reloading store with AutoLoad = false

  1. #1

    [FIXED] [#847] [3.2.1] Layout stops updating after reloading store with AutoLoad = false

    The layout stops responding (panel collapse doesn't work, doesn't respond to window resize) after calling reload() on a store defined with AutoLoad="false". It works fine after removing the AutoLoad config property. I'm not sure what the significance is of setting AutoLoad currently - I have it set in a bunch of places because that's how I had it when using v1.x (where I think it would attempt a load call if I didn't explicitly shut off AutoLoad). This wasn't an issue in 3.1 (SVN rev 6401) - I updated to the public 3.2 and then SVN rev 6502 and saw the same result. I'm now going to see how much of a mess it makes if I pull out all of the explicit AutoLoad properties in my code.

    Tested in IE11 and Firefox 39.0.

    Example:
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            TestStore.ReadData += new Store.AjaxReadDataEventHandler(TestStore_ReadData);
        }
    
        protected void TestStore_ReadData(object sender, StoreReadDataEventArgs e)
        {
            Random testRandom = new Random();
    
            List<object> data = new List<object>();
    
            for (int i = 0; i < 10; i++)
            {
                data.Add(new { randomNumber = testRandom.NextDouble() });
            }
    
            TestStore.DataSource = data;
            TestStore.DataBind();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title></title>
    </head>
    <body>
    <form id="form1" runat="server">
    <ext:ResourceManager runat="server" Theme="Crisp" />
    
    <ext:Viewport runat="server" Layout="VBoxLayout">
        <LayoutConfig>
            <ext:VBoxLayoutConfig Align="Stretch" Pack="Start" />
        </LayoutConfig>
        <Items>
            <ext:GridPanel runat="server" Title="Main" Flex="1">
                <Store>
                    <ext:Store runat="server" ID="TestStore" AutoLoad="false">
                        <Fields>
                            <ext:ModelField Name="randomNumber" Type="Float" />
                        </Fields>
                    </ext:Store>
                </Store>
                <ColumnModel>
                    <Columns>
                        <ext:Column runat="server" Text="Random Numbers" DataIndex="randomNumber" Flex="1" />
                    </Columns>
                </ColumnModel>
                <BottomBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Reload" Handler="#{TestStore}.reload();" />
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:GridPanel>
            <ext:Panel runat="server"
                Height="200"
                Title="Bottom"
                Collapsible="true">
                <Content>this won't collapse after you click Reload</Content>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    
    </form>
    </body>
    </html>
    Last edited by Daniil; Aug 06, 2015 at 8:59 AM. Reason: [FIXED] [#847] [3.2.1]
  2. #2
    Hello @smmille1!

    Thanks for reporting this issue! I noticed also, when you expand that bottom bar, the animation moves as if it is expanding to the top of the screen... Strange (ie11 here).

    The problem is a bug with the reload() method that do not actually set as load() in the first time it is run. That's why with "AutoLoad=true" the issue is not reproducible.

    To overcome the issue (not fix the bug), I've added on your example a simple test: if not loaded, then load once. regardless of being loaded, call for the reload.

    Your example (thanks for providing a fully runnable sample, enabling me to reproduce your issue in moments) would become this, with my "fix":
    <%@ Page Language="C#" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            TestStore.ReadData += new Store.AjaxReadDataEventHandler(TestStore_ReadData);
        }
    
        protected void TestStore_ReadData(object sender, StoreReadDataEventArgs e)
        {
            Random testRandom = new Random();
    
            List<object> data = new List<object>();
    
            for (int i = 0; i < 10; i++)
            {
                data.Add(new { randomNumber = testRandom.NextDouble() });
            }
    
            TestStore.DataSource = data;
            TestStore.DataBind();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function testStoreReload() {
                if (!App.TestStore.isLoaded()) {
                    App.TestStore.load();
                };
                App.TestStore.reload();
            }
        </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <ext:ResourceManager runat="server" Theme="Crisp" />
    
    <ext:Viewport runat="server" Layout="VBoxLayout">
        <LayoutConfig>
            <ext:VBoxLayoutConfig Align="Stretch" Pack="Start" />
        </LayoutConfig>
        <Items>
            <ext:GridPanel runat="server" Title="Main" Flex="1">
                <Store>
                    <ext:Store runat="server" ID="TestStore" AutoLoad="false">
                        <Fields>
                            <ext:ModelField Name="randomNumber" Type="Float" />
                        </Fields>
                    </ext:Store>
                </Store>
                <ColumnModel>
                    <Columns>
                        <ext:Column runat="server" Text="Random Numbers" DataIndex="randomNumber" Flex="1" />
                    </Columns>
                </ColumnModel>
                <BottomBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Reload" Handler="testStoreReload()" />
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:GridPanel>
            <ext:Panel runat="server"
                Height="200"
                Title="Bottom"
                Collapsible="true">
                <Content>this won't collapse after you click Reload</Content>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    
    </form>
    </body>
    </html>
    Notice I created a JavaScript function to be called when you click the 'Reload' button.

    Hoping to be helpful. I will log this on GitHub so we fix this issue for good.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello, I've opened the bug report under issue ID 847.

    We'll update this thread as soon as the issue is fixed. Thank you again for reporting us this issue!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Fixed in the revision 6507 (trunk). It goes to 3.2.1.

    Thank you again for the report!

Similar Threads

  1. Replies: 3
    Last Post: Sep 15, 2017, 8:46 PM
  2. [CLOSED] [#600] TreePanel's AutoLoad set to false
    By RCN in forum 3.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 14, 2015, 12:20 PM
  3. Replies: 5
    Last Post: May 17, 2013, 11:54 AM
  4. Replies: 1
    Last Post: Apr 21, 2013, 3:13 PM
  5. Store HttpProxy with AutoLoad = False
    By mkshields9w57 in forum 1.x Help
    Replies: 5
    Last Post: Oct 12, 2011, 5:07 PM

Posting Permissions