[CLOSED] Problem showing the Load mask

  1. #1

    [CLOSED] Problem showing the Load mask

    Hi,

    I'm trying to implement a simple GridPanel behavior that would display the Load Mask when user hits the "Refresh" button on the paging toolbar. Please suggest the correct approach to achieve it. I've tried to do it via the GridView (no effect) and the Loader control, which throws a client side error. My code sample is below.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        private object[] TestData
        {
            get
            {
                var now = DateTime.Now;
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "Government Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
                };
            }
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                DataBind();
            }
        }
    
        private void DataBind()
        {
            this.Store1.DataSource = this.TestData;
            this.Store1.DataBind();
        }
    
        protected void Store1_ReadData(object sender, StoreReadDataEventArgs e)
        {
            var store = sender as Store;
            if (store == null) return;
            var dataSource = store.DataSource;
    
            if (dataSource != null) return;
    
            DataBind();
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Local Data Paging - Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:GridPanel ID="GridPanel1" runat="server" Flex="1">
                        <Store>
                            <ext:Store ID="Store1" runat="server" RemoteSort="false" AutoLoad="true" PageSize="10" OnReadData="Store1_ReadData">
                                <Model>
                                    <ext:Model ID="Model1" runat="server" IDProperty="company">
                                        <Fields>
                                            <ext:ModelField Name="company" />
                                            <ext:ModelField Name="price" Type="Float" />
                                            <ext:ModelField Name="change" Type="Float" />
                                            <ext:ModelField Name="pctChange" Type="Float" />
                                            <ext:ModelField Name="lastChange" Type="Date" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Width="200">
                                    <Editor>
                                        <ext:TextField ID="TextField1" runat="server" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price">
                                    <Editor>
                                        <ext:TextField ID="TextField2" runat="server" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column ID="Column3" runat="server" Text="Change" Width="100" DataIndex="change" />
                                <ext:Column ID="Column4" runat="server" Text="Change" Width="100" DataIndex="pctChange" />
                                <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" Width="120" DataIndex="lastChange"
                                    Format="HH:mm:ss" />
                            </Columns>
                        </ColumnModel>
    <%--                    <Loader runat="server">
                            <LoadMask Msg="Loading..." ShowMask="true" StoreID="Store1"></LoadMask>
                        </Loader>
                        <View>
                            <ext:GridView runat="server" LoadMask="true" LoadingText="Loading..." />
                        </View>--%>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" />
                        </SelectionModel>
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar1" runat="server">
                                <Items>
                                </Items>
                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:GridPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by Daniil; Aug 11, 2015 at 12:54 PM. Reason: [CLOSED]
  2. #2
    Hello @vadym.f!

    There are at least three ways you can accomplish that.

    1)
    Do you remember this post from 2013? :)

    While investigating ways to help you fix it, I come across it, and it still is actual.

    In short, you use a RefreshHandler to your pagingToolbar to show the mask while the refresh is happening.

    2)
    As an alternative to the solution in the post from 2013, you can also add BeforeLoad and Load listeners to the store itself -- so it becomes independent of the paging toolbar. Add this inside the <ext:Store /> section:
                                <Listeners>
                                    <BeforeLoad Handler="App.GridPanel1.mask('Loading...');" />
                                    <Load Handler="App.GridPanel1.unmask();" />
                                </Listeners>
    3)
    Use the pageProxy with local paging. For this, you add RemotePaging="false" to the store parameters and add
    <Proxy>
      <ext:PageProxy />
    </Proxy>
    to the store as well.

    Personally I would go with the idea 2 or 3, that is more related to the store. So if, say, you move the store from one grid or reuse it somewhere else, you will not have to worry with the load mask -- and it shows the mask on first load as well! The 3rd option is even more generic that does not need a reference to the grid/container you want to mask.

    I have rewritten your full example below using alternative (3). Feel free to choose whichever best fit your scenario.

    Added a System.Threading.Thread.Sleep(2000); to the Store1_ReadData method to make it clearer the missing mask.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        private object[] TestData
        {
            get
            {
                var now = DateTime.Now;
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "Government Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
                };
            }
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                DataBind();
            }
        }
    
        private void DataBind()
        {
            this.Store1.DataSource = this.TestData;
            this.Store1.DataBind();
        }
    
        protected void Store1_ReadData(object sender, StoreReadDataEventArgs e)
        {
            var store = sender as Store;
            if (store == null) return;
            var dataSource = store.DataSource;
    
            if (dataSource != null) return;
    
            System.Threading.Thread.Sleep(2000);
            
            DataBind();
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Local Data Paging - Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:GridPanel ID="GridPanel1" runat="server" Flex="1">
                        <Store>
                            <ext:Store ID="Store1" runat="server" RemoteSort="false" RemotePaging="false" AutoLoad="true" PageSize="10" OnReadData="Store1_ReadData">
                                <Model>
                                    <ext:Model ID="Model1" runat="server" IDProperty="company">
                                        <Fields>
                                            <ext:ModelField Name="company" />
                                            <ext:ModelField Name="price" Type="Float" />
                                            <ext:ModelField Name="change" Type="Float" />
                                            <ext:ModelField Name="pctChange" Type="Float" />
                                            <ext:ModelField Name="lastChange" Type="Date" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                                <Proxy>
                                    <ext:PageProxy />
                                </Proxy>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Width="200">
                                    <Editor>
                                        <ext:TextField ID="TextField1" runat="server" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price">
                                    <Editor>
                                        <ext:TextField ID="TextField2" runat="server" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column ID="Column3" runat="server" Text="Change" Width="100" DataIndex="change" />
                                <ext:Column ID="Column4" runat="server" Text="Change" Width="100" DataIndex="pctChange" />
                                <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" Width="120" DataIndex="lastChange"
                                    Format="HH:mm:ss" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" />
                        </SelectionModel>
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar1" runat="server">
                                <Items>
                                </Items>
                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:GridPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    [/code]
    Last edited by fabricio.murta; Aug 07, 2015 at 11:51 PM. Reason: Clarify and reorganize
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thanks for your insightful suggestions, Fabricio! I like the option using PageProxy as the simplest solution. However, I've run into a problem refreshing the grid content using a direct method as in the updated code sample below. Somehow, the view doesn't get refreshed. Could you advise what's wrong there?

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        private object[] TestData
        {
            get
            {
                var now = DateTime.Now;
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "Government Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
                };
            }
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                DataBind();
            }
        }
    
        private void DataBind()
        {
            this.Store1.DataSource = this.TestData;
            this.Store1.DataBind();
        }
    
        protected void Store1_ReadData(object sender, StoreReadDataEventArgs e)
        {
            var store = sender as Store;
            if (store == null) return;
            var dataSource = store.DataSource;
    
            if (dataSource != null) return;
    
            System.Threading.Thread.Sleep(2000);
    
            DataBind();
        }
    
        [DirectMethod]
        public void Refresh()
        {
            DataBind();
        }
    </script>
    <script type="text/javascript">
        var onRefresh = function () {
            App.direct.Refresh({
                success: function () {
    
                }
            });
        };
    
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Local Data Paging - Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:GridPanel ID="GridPanel1" runat="server" Flex="1">
                        <Store>
                            <ext:Store ID="Store1" runat="server" RemoteSort="false" RemotePaging="false" AutoLoad="true" PageSize="10" OnReadData="Store1_ReadData">
                                <Model>
                                    <ext:Model ID="Model1" runat="server" IDProperty="company">
                                        <Fields>
                                            <ext:ModelField Name="company" />
                                            <ext:ModelField Name="price" Type="Float" />
                                            <ext:ModelField Name="change" Type="Float" />
                                            <ext:ModelField Name="pctChange" Type="Float" />
                                            <ext:ModelField Name="lastChange" Type="Date" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                                <Proxy>
                                    <ext:PageProxy />
                                </Proxy>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Width="200">
                                    <Editor>
                                        <ext:TextField ID="TextField1" runat="server" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price">
                                    <Editor>
                                        <ext:TextField ID="TextField2" runat="server" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column ID="Column3" runat="server" Text="Change" Width="100" DataIndex="change" />
                                <ext:Column ID="Column4" runat="server" Text="Change" Width="100" DataIndex="pctChange" />
                                <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" Width="120" DataIndex="lastChange"
                                    Format="HH:mm:ss" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" />
                        </SelectionModel>
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar1" runat="server">
                                <Items>
                                    <ext:Button runat="server" Text="Refresh">
                                        <Listeners>
                                            <Click Fn="onRefresh"></Click>
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:GridPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
  4. #4
    Hello @vadym.f!

    The way you set up your store all you need to do is call a local .reload() and it will use the direct call you bound to it (onReadData).

    So, you can have just:
        var onRefresh = function () {
            App.Store1.reload();
        };
    As your onRefresh function. Do your scenario require a different path to be performed during refresh that is not exactly re-doing what was made during load?
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hi Fabricio,

    In my scenario, the search parameters change in the direct method so the grid store is to be reloaded with a different data set. It would probably be more accurate to call the Refresh method Search instead.
  6. #6
    Hello everybody,

    Just to clarify. If a Store is used with a PageProxy, the data is meant to be loaded via Store's OnReadData only.

    I agree with Fabricio, calling a Store's .reload() is a way to go in your scenario.

    As for search parameters. How do you set them?

    For example, if like that
    <ext:Store ...>
        <Parameters>
            <ext:StoreParameter 
                Action="read" 
                Name="search" 
                Value="App.TextField1.getValue()" 
                Mode="Raw" />
        </Parameters>
    </ext:Store>
    then the Parameter will be recalculated on a .reload() call.

    Also you can always override parameters if set ApplyMode="IfNotExists" for a StoreParameter.
    <ext:StoreParameter 
        Action="read" 
        Name="search" 
        Value="App.TextField1.getValue()" 
        Mode="Raw" 
        ApplyMode="IfNotExists" />
    Then a .reload() could look like:
    App.Store1.reload({
        params: {
            search: "Some search condition"
        }
    });
  7. #7
    Many thanks for your suggestions, guys! It seems like the Page Proxy construct isn't going to work for my scenario. Setting up the RefreshHandler function within the Paging Toolbar is probably the way to go for me right now as it provides for more data binding flexibility. The complete solution is below. Please feel free to mark this thread closed.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        private object[] TestData
        {
            get
            {
                var now = DateTime.Now;
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "Government Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
                };
            }
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                DataBind();
            }
        }
    
        private void DataBind()
        {
            this.Store1.DataSource = this.TestData;
            this.Store1.DataBind();
        }
    
        protected void Store1_ReadData(object sender, StoreReadDataEventArgs e)
        {
            var store = sender as Store;
            if (store == null) return;
            var dataSource = store.DataSource;
    
            if (dataSource != null) return;
    
            System.Threading.Thread.Sleep(2000);
    
            DataBind();
        }
    
        [DirectMethod]
        public void CustomLoad(int count)
        {
            this.Store1.DataSource = this.TestData.Take(count);
    
            System.Threading.Thread.Sleep(2000);
            
            this.Store1.DataBind();
        }
    </script>
    <script type="text/javascript">
        var refreshHandler = function () {
            var grid = this.up('gridpanel');
            Ext.net.Mask.show({
                el: grid
            });
            grid.getStore().reload({
                callback: function () {
                    Ext.net.Mask.hide();
                }
            });
        };
    
        var customLoad = function () {
            var count = 5;
            App.direct.CustomLoad(count, {
                eventMask: { showMask: true, msg: "Custom Loading..." },
                success: function (result) {
                    App.GridPanel1.getView().refresh();
                }
            });
        };
    
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Local Data Paging - Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:GridPanel ID="GridPanel1" runat="server" Flex="1">
                        <Store>
                            <ext:Store ID="Store1" runat="server" RemoteSort="false" RemotePaging="false" AutoLoad="true" PageSize="10" OnReadData="Store1_ReadData">
                                <Model>
                                    <ext:Model ID="Model1" runat="server" IDProperty="company">
                                        <Fields>
                                            <ext:ModelField Name="company" />
                                            <ext:ModelField Name="price" Type="Float" />
                                            <ext:ModelField Name="change" Type="Float" />
                                            <ext:ModelField Name="pctChange" Type="Float" />
                                            <ext:ModelField Name="lastChange" Type="Date" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Width="200">
                                    <Editor>
                                        <ext:TextField ID="TextField1" runat="server" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price">
                                    <Editor>
                                        <ext:TextField ID="TextField2" runat="server" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column ID="Column3" runat="server" Text="Change" Width="100" DataIndex="change" />
                                <ext:Column ID="Column4" runat="server" Text="Change" Width="100" DataIndex="pctChange" />
                                <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" Width="120" DataIndex="lastChange"
                                    Format="HH:mm:ss" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                        </SelectionModel>
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar1" runat="server" RefreshHandler="refreshHandler">
                                <Items>
                                    <ext:Button runat="server" Text="Refresh">
                                        <Listeners>
                                            <Click Fn="refreshHandler"></Click>
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button runat="server" Text="Custom Load">
                                        <Listeners>
                                            <Click Fn="customLoad"></Click>
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:GridPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] Load Mask Not displaying on Grid Panel data load
    By WHISHWORKS in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 17, 2013, 3:44 PM
  2. [CLOSED] Problem with mask on store load.
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Jun 07, 2012, 2:37 PM
  3. [CLOSED] Problem with showing and removing Mask on Portlet
    By webppl in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 11, 2011, 10:59 AM
  4. [CLOSED] Event Mask is not showing until complete process
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 08, 2011, 3:36 PM
  5. [CLOSED] Grid Mask Not Showing
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 12, 2010, 9:05 AM

Tags for this Thread

Posting Permissions