[CLOSED] Mask doesn't show on GridPanel store refresh

  1. #1

    [CLOSED] Mask doesn't show on GridPanel store refresh

    Hi,

    This is probably a basic question. I can't seem to get the load mask to display when a Refresh button is hit on the Paging toolbar. What's missing here?

        <ext:Store runat="server" ID="Store1" PageSize="10" OnReadData="Store1_Refresh">
            <Model>
                <ext:Model ID="Model1" runat="server" IDProperty="ID">
                    <Fields>
                        <ext:ModelField Name="ID" Type="Int" />
                        <ext:ModelField Name="Code" Type="String" />
                        <ext:ModelField Name="Description" Type="String" />
                        <ext:ModelField Name="LastRunDate" Type="Date" DateFormat="yyyy-MM-ddTHH:mm:ss" />
                    </Fields>
                </ext:Model>
            </Model>
            <Sorters>
                <ext:DataSorter Property="Code" Direction="ASC" />
            </Sorters>
        </ext:Store>
                <ext:GridPanel ID="GridPanel1" runat="server" Border="false" StoreID="Store1">
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column ID="Column1" runat="server" Width="200" Text="Code" DataIndex="Code" />
                            <ext:Column ID="Column2" runat="server" Width="260" Text="Description" DataIndex="Description" />
                            <ext:DateColumn ID="DateColumn1" runat="server" Width="160" Text="Last Run Date" DataIndex="LastRunDate"
                                Format="yyyy-MM-dd HH:mm:ss" />
                        </Columns>
                    </ColumnModel>
                    <Features>
                        <ext:GridFilters runat="server" ID="GridFilters1" Local="true">
                            <Filters>
                            </Filters>
                        </ext:GridFilters>
                    </Features>
                    <BottomBar>
                        <ext:PagingToolbar ID="PagingToolbar1" runat="server" HideRefresh="False">
                            <Items>
                            </Items>
                        </ext:PagingToolbar>
                    </BottomBar>
                    <View>
                        <ext:GridView ID="GridView1" runat="server" LoadMask="true" LoadingText="Loading..." />
                    </View>
                </ext:GridPanel>
    Last edited by Daniil; Jul 18, 2013 at 7:25 AM. Reason: [CLOSED]
  2. #2
    Hi Vadym,

    I would also expect a loading mask should appear in this scenario. We will investigate.
  3. #3
    If forgot that a View's LoadMask works for asynchronous proxies only like AjaxProxy. In your scenario a PagingMemory is used which is synchronous.

    As a solution I can suggest to set up this RefreshHandler for the PagingToolbar.
    RefreshHandler="Ext.net.Mask.show({ 
                        el: this.up('gridpanel') 
                    });
                    this.getStore().reload({
                        callback: function () {
                            Ext.net.Mask.hide();
                        }
                    });">
  4. #4
    Thanks for the solution Daniil! It seems to be working fine. I believe now I don't need to define the mask appearance in the GridView since it was of no use anyway:

    <script>
    var refreshHandler = function () {
        Ext.net.Mask.show({
            el: this.up('gridpanel')
        });
        this.getStore().reload({
            callback: function () {
                Ext.net.Mask.hide();
            }
        });
    };
    </script>
    <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                if (ExtNet.IsAjaxRequest) return;
                DataBind();
            }
    
            public void DataBind()
            {
                var dataSource = GetData();
                this.Store1.DataSource = dataSource;
                this.Store1.DataBind();
            }
    
            protected void Store1_Refresh(object sender, StoreReadDataEventArgs e)
            {
                var store = sender as Store;
                if (store == null) return;
                var source = store.DataSource;
    
                if (source != null) return;
                DataBind();
            }
    </script>
    
        <ext:Store runat="server" ID="Store1" PageSize="20" RemoteSort="false" OnReadData="Store1_Refresh">
            <Model>
                <ext:Model ID="Model1" runat="server" IDProperty="ID">
                    <Fields>
                        <ext:ModelField Name="ID" Type="Int" />
                        <ext:ModelField Name="Code" Type="String" />
                        <ext:ModelField Name="Description" Type="String" />
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>
                <ext:GridPanel ID="GridPanel1" runat="server" Border="false" StoreID="Store1">
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column ID="Code" runat="server" Width="80" Text="Code" DataIndex="Code" />
                            <ext:Column ID="Description" runat="server" Width="120" Text="Description" DataIndex="Description" />
                        </Columns>
                    </ColumnModel>
                    <BottomBar>
                        <ext:PagingToolbar ID="PagingToolbar1" runat="server" HideRefresh="False" RefreshHandler="refreshHandler">
                            <Items>
                                <ext:Label ID="Label1" runat="server" Text="Page size:" />
                                <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                                <ext:ComboBox ID="ComboPageSize" runat="server" Width="80" Editable="false" ForceSelection="true">
                                    <Items>
                                        <ext:ListItem Text="10" />
                                        <ext:ListItem Text="20" />
                                        <ext:ListItem Text="50" />
                                    </Items>
                                    <SelectedItems>
                                        <ext:ListItem Value="20" />
                                    </SelectedItems>
                                    <Listeners>
                                        <Select Handler="#{GridPanel1}.store.pageSize = parseInt(this.getValue(), 10); #{GridPanel1}.store.reload();" />
                                    </Listeners>
                                </ext:ComboBox>
                            </Items>
                        </ext:PagingToolbar>
                    </BottomBar>
                    <View>
                        <ext:GridView ID="GridView1" runat="server" LoadMask="true" LoadingText="Doesn't show anyway..." />
                    </View>
                </ext:GridPanel>
    You can mark this thread as closed.
  5. #5
    Quote Originally Posted by vadym.f View Post
    I believe now I don't need to define the mask appearance in the GridView since it was of no use anyway:
    Yes, you can remove it in your scenario. It is only used for asynchronous proxy and, by the way, LoadMask="true" is by default.

Similar Threads

  1. Replies: 1
    Last Post: Jun 27, 2013, 5:59 PM
  2. GridPanel + show mask via javascript
    By Birgit in forum 1.x Help
    Replies: 0
    Last Post: Sep 22, 2010, 8:47 AM
  3. Replies: 2
    Last Post: Jul 30, 2010, 12:37 AM
  4. Replies: 1
    Last Post: Nov 25, 2009, 9:09 AM
  5. Replies: 0
    Last Post: Jun 01, 2009, 5:27 AM

Tags for this Thread

Posting Permissions