[CLOSED] Need to display "Loading..." when clicking on a new panel

  1. #1

    [CLOSED] Need to display "Loading..." when clicking on a new panel

    Hello,

    I've got a TabPanel with three tabs in it. When the page loads, I see the loadmask for the first tab, but when I click on the next tab, which has a GO button in the toolbar, when I click the GO button, I don't see the "loading..." loadmask.

    How do I get the loadmask to appear each time I click the GO button. I put GridPanel.LoadMask.ShowMask = True on the firing event of the GO button in the code behind, but nothing seems to happen.

    Thanks.
    Last edited by Daniil; Sep 01, 2010 at 1:41 PM. Reason: [CLOSED]
  2. #2
    Please post a [simplified] .aspx code sample demonstrating what you have configured.
    Geoffrey McGill
    Founder
  3. #3
    Ok, here is the sample code. Please help me solve the following TWO issues:

    1. I want the "Loading..." loadmask to appear while the data is being loaded.

    2. I want the grid to fill out the page. Currently, there's only one row and that row has a scrollbar associated with it. I don't want that.

    Thanks.

    <%@ Page Language="vb" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        Protected Sub MarketValueGo_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles MarketValueGo.Click
            Dim data As New List(Of Object)
            Dim x As Integer = 1
            While x < 10000
                data.Add(New With {.Description_vc = "Howard the Duck Household", .MarketValue_fl = 321312.02, .Allocation_fl = 1321.24})
                x += 1
            End While
            Me.MarketValueStore.DataSource = data
            Me.MarketValueStore.DataBind()
        End Sub
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <form id="form1" runat="server">
        <div>
            <ext:Viewport runat="server">
                <Items>
                    <ext:TabPanel ID="TabPanel2" runat="server">
                        <Items>
                            <ext:Panel ID="MarketValuePanel" runat="server" Title="Market Value">
                                <Items>
                                    <ext:Panel ID="HoldingsPanel" runat="server" Border="false" Layout="Fit">
                                        <TopBar>
                                            <ext:Toolbar ID="Toolbar1" runat="server">
                                                <Items>
                                                    <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                                                    <ext:Button ID="MarketValueGo" runat="server" Text="GO" Icon="PlayGreen">
                                                        <DirectEvents>
                                                            <Click OnEvent="MarketValueGo_Click" />
                                                        </DirectEvents>
                                                    </ext:Button>
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <Items>
                                            <ext:FitLayout ID="FitLayout1" runat="server">
                                                <Items>
                                                    <ext:GridPanel ID="MarketValueGridPanel" runat="server">
                                                        <Store>
                                                            <ext:Store ID="MarketValueStore" runat="server">
                                                                <Reader>
                                                                    <ext:JsonReader>
                                                                        <Fields>
                                                                            <ext:RecordField Name="Description_vc" Type="String" />
                                                                            <ext:RecordField Name="MarketValue_fl" Type="Float" />
                                                                            <ext:RecordField Name="Allocation_fl" Type="Float" />
                                                                        </Fields>
                                                                    </ext:JsonReader>
                                                                </Reader>
                                                            </ext:Store>
                                                        </Store>
                                                        <ColumnModel ID="ColumnModel1" runat="server">
                                                            <Columns>
                                                                <ext:Column ColumnID="Description" Header="Description" DataIndex="Description_vc"
                                                                    Width="300" />
                                                                <ext:Column ColumnID="MarketValue" Header="Market Value" DataIndex="MarketValue_fl" />
                                                                <ext:Column ColumnID="Allocation" Header="Allocation" DataIndex="Allocation_fl" />
                                                            </Columns>
                                                        </ColumnModel>
                                                        <LoadMask ShowMask="true" />
                                                    </ext:GridPanel>
                                                </Items>
                                            </ext:FitLayout>
                                        </Items>
                                    </ext:Panel>
                                </Items>
                            </ext:Panel>
                            <ext:Panel ID="PanelPerformance" runat="server" Title="Performance">
                                <Content>
                                </Content>
                            </ext:Panel>
                            <ext:Panel ID="PanelQuickReports" runat="server" Title="Quick Reports">
                                <Content>
                                </Content>
                            </ext:Panel>
                            <ext:Panel ID="PanelReporting" runat="server" Title="Reporting">
                                <Content>
                                </Content>
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel>
                </Items>
            </ext:Viewport>
        </div>
        </form>
    </body>
    </html>
  4. #4
    Hello!

    Please use the EventMask property.

    Example
    <ext:Button runat="server">
           <DirectEvents>
               <Click OnEvent="ButtonClick">
                   <EventMask ShowMask="true" />
               </Click>
           </DirectEvents>
    </ext:Button>
  5. #5
    That answers question 1. What about question 2?
  6. #6
    Hi,

    Please add Layout="Fit" to the viewport and MarketValuePanel
    <%@ Page Language="C#" %> 
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System.Collections.Generic" %>
     
    <script runat="server">
        protected void MarketValueGo_Click(object sender, System.EventArgs e)
        {
    	    List<object> data = new List<object>();
    	    int x = 1;
    	    while (x < 2) {
    		    data.Add(new {
    			    Description_vc = "Howard the Duck Household",
    			    MarketValue_fl = 321312.02,
    			    Allocation_fl = 1321.24
    		    });
    		    x += 1;
    	    }
    	    this.MarketValueStore.DataSource = data;
    	    this.MarketValueStore.DataBind();
        }
    </script>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <form id="form1" runat="server">
        <div>
            <ext:Viewport runat="server" Layout="Fit">
                <Items>
                    <ext:TabPanel ID="TabPanel2" runat="server">
                        <Items>
                            <ext:Panel ID="MarketValuePanel" runat="server" Title="Market Value" Layout="Fit">
                                <Items>
                                    <ext:Panel ID="HoldingsPanel" runat="server" Border="false" Layout="Fit">
                                        <TopBar>
                                            <ext:Toolbar ID="Toolbar1" runat="server">
                                                <Items>
                                                    <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                                                    <ext:Button ID="MarketValueGo" runat="server" Text="GO" Icon="PlayGreen">
                                                        <DirectEvents>
                                                            <Click OnEvent="MarketValueGo_Click" />
                                                        </DirectEvents>
                                                    </ext:Button>
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <Items>
                                            <ext:FitLayout ID="FitLayout1" runat="server">
                                                <Items>
                                                    <ext:GridPanel ID="MarketValueGridPanel" runat="server">
                                                        <Store>
                                                            <ext:Store ID="MarketValueStore" runat="server">
                                                                <Reader>
                                                                    <ext:JsonReader>
                                                                        <Fields>
                                                                            <ext:RecordField Name="Description_vc" Type="String" />
                                                                            <ext:RecordField Name="MarketValue_fl" Type="Float" />
                                                                            <ext:RecordField Name="Allocation_fl" Type="Float" />
                                                                        </Fields>
                                                                    </ext:JsonReader>
                                                                </Reader>
                                                            </ext:Store>
                                                        </Store>
                                                        <ColumnModel ID="ColumnModel1" runat="server">
                                                            <Columns>
                                                                <ext:Column ColumnID="Description" Header="Description" DataIndex="Description_vc"
                                                                    Width="300" />
                                                                <ext:Column ColumnID="MarketValue" Header="Market Value" DataIndex="MarketValue_fl" />
                                                                <ext:Column ColumnID="Allocation" Header="Allocation" DataIndex="Allocation_fl" />
                                                            </Columns>
                                                        </ColumnModel>
                                                        <LoadMask ShowMask="true" />
                                                    </ext:GridPanel>
                                                </Items>
                                            </ext:FitLayout>
                                        </Items>
                                    </ext:Panel>
                                </Items>
                            </ext:Panel>
                            <ext:Panel ID="PanelPerformance" runat="server" Title="Performance">
                                <Content>
                                </Content>
                            </ext:Panel>
                            <ext:Panel ID="PanelQuickReports" runat="server" Title="Quick Reports">
                                <Content>
                                </Content>
                            </ext:Panel>
                            <ext:Panel ID="PanelReporting" runat="server" Title="Reporting">
                                <Content>
                                </Content>
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel>
                </Items>
            </ext:Viewport>
        </div>
        </form>
    </body>
    </html>
  7. #7
    Thanks for that. Very helpful. Now I have another question:

    I want to style the label inside the tabstrip by giving it a larger font and making it bold. As you can see in the code sample below, I've created a class and assign the class to the label via the Cls attribute. But it isn't working. Any ideas?

    <%@ Page Language="vb" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        Protected Sub MarketValueGo_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles MarketValueGo.Click
            Dim data As New List(Of Object)
            Dim x As Integer = 1
            While x < 100
                data.Add(New With {.Description_vc = "Howard the Duck Household", .MarketValue_fl = 321312.02, .Allocation_fl = 1321.24})
                x += 1
            End While
            Me.MarketValueStore.DataSource = data
            Me.MarketValueStore.DataBind()
        End Sub
    </script>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .detailsHeader 
            {
                font-family:Jokerman;
                font-weight:bold;
                font-size:1.1em;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <form id="form1" runat="server">
        <div>
            <ext:Viewport runat="server" Layout="Fit">
                <Items>
                    <ext:Panel ID="Panel2" runat="server" Layout="card" ActiveIndex="0">
                        <TopBar>
                            <ext:Toolbar ID="Toolbar2" runat="server">
                                <Items>
                                    <ext:TabStrip ID="TabStrip1" runat="server">
                                        <Items>
                                            <ext:TabStripItem ActionItemID="MarketValuePanel" runat="server" Title="Market Value" />
                                            <ext:TabStripItem ActionItemID="PerformancePanel" runat="server" Title="Performance" />
                                            <ext:TabStripItem ActionItemID="QuickReportsPanel" runat="server" Title="Quick Reports" />
                                            <ext:TabStripItem ActionItemID="ReportingPanel" runat="server" Title="Reporting" />
                                        </Items>
                                    </ext:TabStrip>
                                    <ext:ToolbarFill ID="ToolbarFill2" runat="server" />
                                    <ext:Label ID="Description" runat="server" Text="Will Smith Household" Cls="detailHeader" />
                                    <ext:ToolbarSpacer runat="server" Width="5" />
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <Items>
                            <ext:Panel ID="MarketValuePanel" runat="server" Title="Market Value" Header="false" Layout="Fit">
                                <Items>
                                    <ext:Panel ID="HoldingsPanel" runat="server" Border="false" Layout="Fit">
                                        <TopBar>
                                            <ext:Toolbar ID="Toolbar1" runat="server">
                                                <Items>
                                                    <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                                                    <ext:Button ID="MarketValueGo" runat="server" Text="GO" Icon="PlayGreen">
                                                        <DirectEvents>
                                                            <Click OnEvent="MarketValueGo_Click">
                                                                <EventMask ShowMask="true" />
                                                            </Click>
                                                        </DirectEvents>
                                                    </ext:Button>
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <Items>
                                            <ext:FitLayout ID="FitLayout1" runat="server">
                                                <Items>
                                                    <ext:GridPanel ID="MarketValueGridPanel" runat="server" AutoExpandColumn="Description_vc">
                                                        <Store>
                                                            <ext:Store ID="MarketValueStore" runat="server">
                                                                <Reader>
                                                                    <ext:JsonReader>
                                                                        <Fields>
                                                                            <ext:RecordField Name="Description_vc" Type="String" />
                                                                            <ext:RecordField Name="MarketValue_fl" Type="Float" />
                                                                            <ext:RecordField Name="Allocation_fl" Type="Float" />
                                                                        </Fields>
                                                                    </ext:JsonReader>
                                                                </Reader>
                                                                <AutoLoadParams>
                                                                    <ext:Parameter Name="start" Value="0" Mode="Raw" />
                                                                    <ext:Parameter Name="limit" Value="20" Mode="Raw" />
                                                                </AutoLoadParams>
                                                            </ext:Store>
                                                        </Store>
                                                        <ColumnModel ID="ColumnModel1" runat="server">
                                                            <Columns>
                                                                <ext:Column ColumnID="Description" Header="Description" DataIndex="Description_vc"
                                                                    Width="300" />
                                                                <ext:Column ColumnID="MarketValue" Header="Market Value" DataIndex="MarketValue_fl" />
                                                                <ext:Column ColumnID="Allocation" Header="Allocation" DataIndex="Allocation_fl" />
                                                            </Columns>
                                                        </ColumnModel>
                                                        <BottomBar>
                                                            <ext:PagingToolbar ID="MarketValuePagingToolBar" runat="server" PageSize="20" HideRefresh="true" />
                                                        </BottomBar>
                                                        <LoadMask ShowMask="true" />
                                                    </ext:GridPanel>
                                                </Items>
                                            </ext:FitLayout>
                                        </Items>
                                    </ext:Panel>
                                </Items>
                            </ext:Panel>
                            <ext:Panel ID="PerformancePanel" runat="server" Title="Performance" Header="false">
                                <Content>
                                </Content>
                            </ext:Panel>
                            <ext:Panel ID="QuickReportsPanel" runat="server" Title="Quick Reports" Header="false">
                                <Content>
                                </Content>
                            </ext:Panel>
                            <ext:Panel ID="ReportingPanel" runat="server" Title="Reporting" Header="false">
                                <Content>
                                </Content>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </div>
        </form>
    </body>
    </html>
  8. #8
    Hi,

    Please create new topic because new question is not related with iriginal issue. Thanks

Similar Threads

  1. [CLOSED] How does "MaskCls" work for "AutoLoad" mask in panel control
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 19, 2012, 12:09 PM
  2. Replies: 1
    Last Post: Jun 26, 2012, 11:29 AM
  3. Replies: 4
    Last Post: May 22, 2012, 10:40 AM
  4. Replies: 5
    Last Post: May 02, 2012, 5:37 PM
  5. Replies: 4
    Last Post: Oct 11, 2011, 2:42 AM

Posting Permissions