[CLOSED] Grid with PagingToolbar in TabPanel hangs on Loading Mask

  1. #1

    [CLOSED] Grid with PagingToolbar in TabPanel hangs on Loading Mask

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e) {
            Test1GridStore.Model.Add(
                    new Model() {
                        Fields = {
                            new ModelField() { Name = "PersID" },
                            new ModelField() { Name = "FirstName" },
                            new ModelField() { Name = "LastName" }
                        }
                    }
                );
            Test2GridStore.Model.Add((
                new Model() {
                    Fields = {
                            new ModelField() { Name = "PersID" },
                            new ModelField() { Name = "FirstName" },
                            new ModelField() { Name = "LastName" }
                        }
                }
            ));
    
            Viewport viewport = new Viewport() {
                Layout = "Fit",
                Items = {
                    new TabPanel() {
                        Items = {
                            new Ext.Net.GridPanel() {
                                ID = "Test1Grid",
                                Title = "Test1",
                                StoreID = "Test1GridStore",
                                ColumnModel = { 
                                    Columns = { 
                                        new Column() { Text = "PersID", DataIndex = "PersID" },
                                        new Column() { Text = "Vorname", DataIndex = "FirstName" },
                                        new Column() { Text = "Nachname", DataIndex = "LastName" }
                                    } 
                                },
                                Plugins = { new FilterHeader() },
                                SelectionModel = { new RowSelectionModel() },
                                View = { new Ext.Net.GridView() { StripeRows = true, TrackOver = true } },
                                BottomBar = { new PagingToolbar() { DisplayInfo = true, DisplayMsg = "Mitarbeiter {0} - {1} von {2}" } }
                            },
                            new Ext.Net.GridPanel() {
                                ID = "Test2Grid",
                                Title = "Test2",
                                StoreID = "Test2GridStore",
                                ColumnModel = { 
                                    Columns = { 
                                        new Column() { Text = "PersID", DataIndex = "PersID" },
                                        new Column() { Text = "Vorname", DataIndex = "FirstName" },
                                        new Column() { Text = "Nachname", DataIndex = "LastName" }
                                    } 
                                },
                                Plugins = { new FilterHeader() },
                                SelectionModel = { new RowSelectionModel() },
                                View = { new Ext.Net.GridView() { StripeRows = true, TrackOver = true } },
                                BottomBar = { new PagingToolbar() { DisplayInfo = true, DisplayMsg = "Mitarbeiter {0} - {1} von {2}" } }
                            }
                        }
                    }
                }
            };
    
            this.Page.Controls.Add(viewport);
        }
    
        protected void Test1GridStore_ReadData(object sender, StoreReadDataEventArgs e) {
            e.Total = 3;
            Test1GridStore.DataSource = new object[]
            {
                new object[] { "1", "Vorname1", "Nachname1"},
                new object[] { "2", "Vorname2", "Nachname2"},
                new object[] { "2", "Vorname3", "Nachname3"}
            };
            Test1GridStore.DataBind();
        }
    
        protected void Test2GridStore_ReadData(object sender, StoreReadDataEventArgs e) {
            e.Total = 5;
            Test2GridStore.DataSource = new object[]
            {
                new object[] { "4", "Vorname4", "Nachname4"},
                new object[] { "5", "Vorname5", "Nachname5"},
                new object[] { "6", "Vorname6", "Nachname6"},
                new object[] { "7", "Vorname7", "Nachname7"},
                new object[] { "8", "Vorname8", "Nachname8"}
            };
            Test2GridStore.DataBind();
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Store 
                ID="Test1GridStore" 
                runat="server"
                RemotePaging="false"
                AutoLoad="true"
                RemoteSort="false"
                OnReadData="Test1GridStore_ReadData" >
                <Proxy><ext:PageProxy /></Proxy>
            </ext:Store>
            <ext:Store 
                ID="Test2GridStore" 
                runat="server"
                RemotePaging="false"
                RemoteSort="false"
                AutoLoad="true"
                OnReadData="Test2GridStore_ReadData" >
                <Proxy><ext:PageProxy /></Proxy>
            </ext:Store>
        </form>
    </body>
    </html>
    I have a problem with grids in tabpanel. I load on the first tab a gridpanel with data. Thats fine. One the second tab, i want to load a other grid and this hangs on the loadmask. But the displayinfo has information and when i sort then behind the loadmask the data will display.

    I try it to solve the issue and has remove the plugins and others. The result ist that when i remove the pagingtoolbar, it works. But that is no solution for me to remove the pagingtoolbar so that grid in the second tab works.

    Is that a known bug and/or can me help someone to solve the issue?
    Last edited by Daniil; Apr 17, 2015 at 11:17 AM. Reason: [CLOSED]
  2. #2
    Hi @ITDirekt,

    Welcome to the Ext.NET forums!

    I think you have encountered a known issue.
    https://github.com/extnet/Ext.NET/issues/664

    As a workaround, we can suggest to set AutoLoad="false" for the second Store and load it on activation of the second tab by setting this section for GridPanel:
    Listeners = 
    {
        Activate =
        {
            Single = true,
            Handler = "this.getStore().load();"
        }
    }
  3. #3
    Thanks a lot. It solves the problem.

Similar Threads

  1. [CLOSED] How NOT to show the loading mask for TabPanel?
    By vadym.f in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Aug 07, 2013, 11:44 AM
  2. [CLOSED] Loading data in store take too long. browser hangs.
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 21
    Last Post: Nov 22, 2011, 8:42 AM
  3. [CLOSED] Bug when open window, loading mask hangs
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Oct 14, 2011, 6:23 PM
  4. [CLOSED] Loading Mask Before data bind to grid
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Apr 27, 2011, 12:22 PM
  5. [CLOSED] Grid Loading Mask
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 12, 2009, 9:09 AM

Tags for this Thread

Posting Permissions