[CLOSED] mask/unmask ext charts

**Sowjanya** · Nov 11, 2013, 4:26 PM

Hi,

I am using ext.net line chart in my application.

I have a grid, where on clicking the command button on that row, it opens us a window in which the chart is loaded. I am trying to have a mask over the whole window till the chart , side grids are completely loaded.
After all are loaded, it should unmask...

can you pls let me know how i can do that ?

here is the aspx code:
-----------------------------



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CapacityDrilldown.aspx.cs" Inherits="Dashboard.Content.Distributed.CapacityDrilldown" %>

<!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">

<style type="text/css">

 .x-grid-row .tdRed {
            background-color: #FF0000;
            color: Black;
        }
        .x-grid-row .tdAmber {
            background-color: #FF9933;
            color: Black;
        }
        .x-grid-row .tdGreen {
            background-color: #00CC00;
            color: Black;
        }
        
</style>
<script type="text/javascript" >
    

    var appRenderer = function (value, metaData, record) 
    
    {

        //debugger;
        // render only first 3 applications
        var truncValue = value,
                nlCnt = 0,
                finalIndex = 0;
        for (var i = 0, nlInd = 0; i < truncValue.length && nlCnt < 1; ++i) {
            nlInd = truncValue.indexOf('\n');

            if (nlInd == -1) {
                
                break;
            }
            else {
                finalIndex += nlInd + 1;
                truncValue = truncValue.substring(nlInd + 1);
                ++nlCnt;
            }
        }

        truncValue = value.substring(0, finalIndex).replaceAll('\n', '<br/>');
        value = value.replaceAll('\n', '<br/>');

        return Ext.String.format(truncValue + "<a href='#' onclick='listApps({0});'><b>. . .</b></a>", "\"" + value + "\"");
    };

    var listApps = function (appsList) {
        Ext.Msg.show({
            title: 'Applications',
            msg: "<div style='overflow-y:scroll;height:260px;width:375px;'>" + appsList + "</div>"
        });
    }

    String.prototype.replaceAll = function (str1, str2, ignore) {
        return this.replace(new RegExp(str1.replace(/([\/\,\!\\\^\$\{\}\[\]\(\)\.\*\+\?\|\<\>\-\&])/g, "\\$&"), (ignore ? "gi" : "g")), (typeof (str2) == "string") ? str2.replace(/\$/g, "$$$$") : str2);
    }



    var RenderColor = function (value, meta, record) {

       // debugger;
        var today = new Date();


        var TwelveMonthsfromNow = //today.setMonth(d.getMonth() + 12);       // today.add(Date.MONTH, 12);


                    new Date(new Date(today).setMonth(today.getMonth() + 12));

        var Fourmonthsfromnow = new Date(new Date(today).setMonth(today.getMonth() + 4)); // today.setMonth(d.getMonth() + 4);

        var maxdate;



        if (!isNaN(Date.parse(record.data['EST_MAX_DATE']))) {

            maxdate = new Date(Date.parse(record.data['EST_MAX_DATE']));

            if (maxdate <= Fourmonthsfromnow) {
                meta.tdCls = "tdRed";
                //meta.attr = 'style="background-color:' + red + ';"';

            }


            else if (maxdate > Fourmonthsfromnow && maxdate <= TwelveMonthsfromNow) {
                meta.tdCls = "tdAmber";

            }

            else {
                meta.tdCls = "tdGreen";

            }

        }



        return value;
    }



    var SetSliderValue = function (isGrowthSlider, value)
     {

    if(isGrowthSlider ==  true)
        App.SlrAvgGrowthPercent.setValue(0, value);
        else // Monthsback slider
            App.SlrMonthsBack.setValue(0, value);

    };


    function parseDate(input) {
        var parts = input.split('-');
        // new Date(year, month [, date [, hours[, minutes[, seconds[, ms]]]]])
        return new Date(parts[0], parts[1] - 1, parts[2]); // months are 0-based
    }




</script>
    <title></title>
</head>
<body>
    <form id="CapacityDrillDownForm" runat="server">

     <ext:ResourceManager ID="ResourceManager1" runat="server" />


      <ext:ChartTheme ID="Chart_Theme" runat="server" ThemeName="ChartTheme">
            <Axis Stroke="#000000" Font="10px Verdana" FontFamily="Verdana" />
            <AxisLabelLeft Fill="#000000" Font="12px Verdana" FontFamily="Verdana" />
            <AxisLabelBottom Fill="#000000" Font="12px Verdana" FontFamily="Verdana" />
            <AxisTitleBottom  Fill="#000000" Font="12px Verdana" FontFamily="Verdana" />
            <AxisTitleLeft Fill="#000000" Font="12px Verdana" FontFamily="Verdana" />
    </ext:ChartTheme>



      <ext:Window runat="server" ID="window1" Region="Center" width="1300" height="600" Hidden="true">
           <Items>
                  <ext:FormPanel runat="server" Header="false" ID="frmChart" BodyPaddingSummary="30" Margins="0 20 0 0"
                 Layout="VBoxLayout" Width="1400" Height="800">
                    <LayoutConfig>
                        <ext:VBoxLayoutConfig Align="Stretch" />
                    </LayoutConfig> 
                      <Items>

                      <ext:Container runat="server" Layout="VBoxLayout" ID="MainCTR" >

                      <Items>
                    
                      <ext:Container ID="Container1" runat="server" Layout="HBoxLayout">

                      <Items>

                        <ext:DisplayField ID="DisplayField1" runat="server" Html="&nbsp;" Width="50" />

                      <ext:RadioGroup ID="rdoMonthQtr" runat="server" LabelAlign="Right" >
                       <Items>
                            <ext:Radio ID="rdoMonth" runat="server" BoxLabel="Month"  BoxLabelCls="boxcls" Width="75" />
                            <ext:Radio ID="rdoQuarter" runat="server" BoxLabel="Quarter"  Checked="false" BoxLabelCls="boxcls" Width="75" />
                            
                        </Items>
                        <DirectEvents>
                        
                       <Change OnEvent="rdoMonthQtrSelect" Before="return #{frmChart}.getForm().isValid();">
                       <ExtraParams>
                       
                       <ext:Parameter Name="MonthChartData" Value="App.MonthlyChartStore.getRecordsValues()" Mode="Raw" Encode="true" />
                       <ext:Parameter Name="QtrChartData" Value="App.QtrChartStore.getRecordsValues()" Mode="Raw" Encode="true" />
                        <ext:Parameter Name="jsonRecord1" Value="Ext.encode(#{MainTable}.getRowsValues({selectedOnly:true}))"
                                            Mode="Raw" />
                         </ExtraParams>

                       </Change>
                        </DirectEvents>
                        
                      </ext:RadioGroup>

                        <ext:DisplayField ID="DisplayField33" runat="server" Html="&nbsp;" Width="30" />


                        <ext:Slider
                    ID="SlrAvgGrowthPercent" Width="300"
                    runat="server" 
                    Single="true"
                    FieldLabel="Alter Avg. Growth % By:"    LabelWidth="160"                 
                    MinValue="-300" 
                    MaxValue="300" Increment="1">
                   <%-- <Listeners>
                        <Change Fn="ProbabilityChange" />
                    </Listeners>--%>
                  
                    <DirectEvents>
                    
                                        <Change  OnEvent="SliderChange" >
                    <ExtraParams>
                       <%--Before="return #{frmChart}.getForm().isValid();" --%>
                       <ext:Parameter Name="MonthChartData" Value="App.MonthlyChartStore.getRecordsValues()" Mode="Raw" Encode="true" />
                       <ext:Parameter Name="QtrChartData" Value="App.QtrChartStore.getRecordsValues()" Mode="Raw" Encode="true" />
                       <ext:Parameter Name="jsonRecord1" Value="Ext.encode(#{MainTable}.getRowsValues({selectedOnly:true}))"
                                            Mode="Raw" />
                         </ExtraParams>
                           
                         </Change>
                    </DirectEvents>
                </ext:Slider>

                 <ext:DisplayField ID="DisplayField4" runat="server" Html="&nbsp;" Width="30" />

                 <%--<ext:Label ID="lblSliderVal" runat="server" Text="" Width="100" Margins="13 0 0 0"/>--%>

                 <ext:NumberField ID="lblSliderVal" runat="server"  Width="50" MinValue="-300" MaxValue="300" Text="0">
                <Listeners>
                <Change Handler="this.focus(false, 0);App.SlrAvgGrowthPercent.setValue(0, this.value);" />
                </Listeners>
                 </ext:NumberField>


               <%--    <ext:TextField ID="lblSliderVal" runat="server"  Width="50" Text="0" EnforceMaxLength="true" MaxLength="3" 
                   ValidatorText="[0-9]*" Validator="myValidator2" AllowBlank="false">
                <Listeners>
                <Change Handler="App.SlrAvgGrowthPercent.setValue(0, parseInt(this.value));" />
                </Listeners>
                 </ext:TextField>
--%>

                  <ext:DisplayField ID="DisplayField5" runat="server" Html="&nbsp;" Width="30" />


                      <ext:Slider
                    ID="SlrMonthsBack" Width="200"
                    runat="server" 
                    Single="true"
                    FieldLabel="# Months Back:"    LabelWidth="100"                 
                    MinValue="1" 
                    MaxValue="150" Increment="1">
                   <%-- <Listeners>
                        <Change Fn="ProbabilityChange" />
                    </Listeners>--%>
                   <%--  <Listeners>
                    <Change Handler="App.lblSlider2val.setValue(this.value);" />
                    </Listeners>--%>
                    <DirectEvents>
                    <Change  OnEvent="MonthsBackSliderChange" >

                    <ExtraParams>
                     <%--  Before="return #{frmChart}.getForm().isValid();"--%>
                       <ext:Parameter Name="MonthChartData" Value="App.MonthlyChartStore.getRecordsValues()" Mode="Raw" Encode="true" />
                       <ext:Parameter Name="QtrChartData" Value="App.QtrChartStore.getRecordsValues()" Mode="Raw" Encode="true" />
                       <ext:Parameter Name="jsonRecord1" Value="Ext.encode(#{MainTable}.getRowsValues({selectedOnly:true}))"
                                            Mode="Raw" />
                         </ExtraParams>
                           
                         </Change>
                    </DirectEvents>
                </ext:Slider>

                 <ext:DisplayField ID="DisplayField3" runat="server" Html="&nbsp;" Width="30" />
                     
                     
                     <ext:NumberField ID="lblSlider2val" runat="server"  Width="50" MinValue="1" MaxValue="150" Text="24">
                <Listeners>
                <Change Handler="this.focus(false, 0); App.SlrMonthsBack.setValue(0, this.value);" />
                </Listeners>
                 </ext:NumberField>

                <%-- <ext:TextField ID="lblSlider2val" runat="server"  Width="50" Text="24" EnforceMaxLength="true" MaxLength="3" ValidatorText="[0-9]*" Validator="myValidator" AllowBlank="false" >
                     

           <Listeners>
           <Change Handler="App.SlrMonthsBack.setValue(0, parseInt(this.value));" />
           </Listeners>
                 </ext:TextField>--%>

                 

                      
</Items>


                      </ext:Container>


                     

                      <ext:Container ID="Container2" runat="server" Layout="HBoxLayout" Flex="1">
                      <Items>

                    
    <ext:Chart ID="MonthlyChart" Frame="true" runat="server" Width="850" Animate="true" Theme="ChartTheme"
    Height="500" InsetPadding="30"  >
    

    <Loader ID="Loader1" runat="server">
        <LoadMask ShowMask="true"></LoadMask>
    </Loader>
     
     <Store>
             <ext:Store ID="MonthlyChartStore" runat="server" AutoLoad="true">
                <Proxy>
                    <ext:AjaxProxy Json="true" Url='<%#MChartURL%>' AutoDataBind="true" >
                        <ActionMethods Read="POST" Create="POST" />
                        <Headers>
                            <ext:Parameter Name="Accept" Value="application/json" />
                            <ext:Parameter Name="Content-Type" Value="application/json" />
                        </Headers>
                        <Reader>
                            <ext:JsonReader Root="" />
                        </Reader>
                        <Writer>
                            <ext:JsonWriter Root="" Encode="true" />
                        </Writer>
                          <ExtraParams> 
                               
                            <ext:StoreParameter Name="InstanceID" Value="18"/>  
                            <ext:StoreParameter Name="ISMONTH" Value="month"/> 
                            <ext:StoreParameter Name="GrowthValue" Value="0"/>
                            <ext:StoreParameter Name="MonthsBack" Value="24" />                             
                          
                            </ExtraParams>
                    </ext:AjaxProxy>
                </Proxy>
                <Model>
                    <ext:Model ID="MChartStoreModel" runat="server">
                        <Fields>
                            <ext:ModelField Name="PROJECTED_DATE" Type="String">
                          <%--  <Convert Fn="TrimText" />--%>
                            </ext:ModelField>
                            <ext:ModelField Name="PROJECTED_USAGE_MONTH" Type="Float" >
                           <%-- <Convert Fn="percentageConvert" />--%>
                         
                            </ext:ModelField>
                        <ext:ModelField Name="MAX_LINE" Type="Float" />
                        <ext:ModelField Name="PERCENT_GROWTH" Type="Float" />
                        <ext:ModelField Name="PROJECTED_TREND" Type="Float" />
                        <ext:ModelField Name="PERC_GROWTH_TREND" Type="Float" />
                        <ext:ModelField Name="EST_70_DATE" Type="String" />
                        <ext:ModelField Name="EST_MAX_DATE" Type="String" />
                        
                           
                        </Fields>
                    </ext:Model>
                </Model>

                <DirectEvents>
                <Load OnEvent="MonChartStoreLoad">
                <ExtraParams>
                <ext:Parameter Name="MonthChartData" Value="App.MonthlyChartStore.getRecordsValues()" Mode="Raw" Encode="true" />
                <ext:Parameter Name="jsonRecord1" Value="Ext.encode(#{MainTable}.getRowsValues({selectedOnly:true}))"
                                            Mode="Raw" />
                </ExtraParams>
                </Load>
                </DirectEvents>

              <%--  <Listeners>
                <Load Fn="AfterLoad('MONTH')" />
                </Listeners>--%>
             <%--  <Listeners>
              
        <Load Handler="if(data.records.length > 0) { App.direct.getCurrentMonthValue('MONTH', data.records[0].get('PROJECTED_USAGE_MONTH'));}" />
        </Listeners>--%>
            </ext:Store>
</Store>


    <Axes>
        <ext:NumericAxis Fields="PROJECTED_USAGE_MONTH" Position="Left" Title="Projected Usage(Mon)" AxisID="Axis1" MajorTickSteps="30">
          <%--  <GridConfig>
                <Odd Opacity="1" Fill="#ddd" Stroke="#bbb" StrokeWidth="0.5" />
            </GridConfig>--%>
        </ext:NumericAxis>

     
           <ext:CategoryAxis Fields="PROJECTED_DATE" Position="Bottom" Title="Months Out(date)" />
       
     
       
    </Axes>
    <Series>
   
  

        <ext:LineSeries SeriesID="Series1" Axis="Left" XField="PROJECTED_DATE" YField="PROJECTED_USAGE_MONTH"  Smooth="3">
            <HighlightConfig Size="7" Radius="7" />
            <MarkerConfig Type="Cross" Size="1" Radius="1" StrokeWidth="0" />
            <Tips ID="Tips1" runat="server" TrackMouse="true" Width="140" Height="35">
                <Renderer Handler="this.setTitle(storeItem.get('PROJECTED_DATE') + '<br />' + storeItem.get('PROJECTED_USAGE_MONTH'));"></Renderer>
            </Tips>
        </ext:LineSeries>


          <ext:LineSeries SeriesID="Series11" Axis="Left" XField="PROJECTED_DATE" YField="MAX_LINE" Smooth="3">
            <HighlightConfig Size="7" Radius="7" />
            <MarkerConfig Type="Circle" Size="1" Radius="1" StrokeWidth="0" />
            <Tips ID="Tips2" runat="server" TrackMouse="true" Width="75" Height="35">
                <Renderer Handler="this.setTitle(storeItem.get('PROJECTED_DATE') + '<br />' + storeItem.get('MAX_LINE'));"></Renderer>
            </Tips>
        </ext:LineSeries>


    
       
    </Series>

     <Plugins>
                        <ext:VerticalMarker ID="VerticalMarker2" runat="server">
                            <XLabelRenderer Handler="return value;" />
                        </ext:VerticalMarker>
                    </Plugins>

                   <%-- <Listeners>

                    <Render
                    Handler="Ext.getCmp('window1').mask();"/>
                    <AfterRender
                     Handler="Ext.getCmp('window1').unmask();" Delay="1"/>
                   
                    
                    </Listeners>--%>
    </ext:Chart>
                        

                        

                    
    <ext:Chart ID="QuarterlyChart" runat="server" Width="850" Animate="true" Theme="ChartTheme"
    Height="500" Frame="true" InsetPadding="30" >
   
    <Loader ID="Loader2" runat="server">
        <LoadMask ShowMask="true"></LoadMask>
    </Loader>
        <Store>

        
        <ext:Store ID="QtrChartStore" runat="server" AutoLoad="true">
                <Proxy>
                    <ext:AjaxProxy Json="true" Url='<%#QChartURL%>' AutoDataBind="true" >
                        <ActionMethods Read="POST" Create="POST" />
                        <Headers>
                            <ext:Parameter Name="Accept" Value="application/json" />
                            <ext:Parameter Name="Content-Type" Value="application/json" />
                        </Headers>
                        <Reader>
                            <ext:JsonReader Root="" />
                        </Reader>
                        <Writer>
                            <ext:JsonWriter Root="" Encode="true" />
                        </Writer>
                          <ExtraParams> 
                               
                            <ext:StoreParameter Name="InstanceID" Value="18"/>  
                            <ext:StoreParameter Name="ISMONTH" Value="quarter"/> 
                            <ext:StoreParameter Name="GrowthValue" Value="0"/>    
                            <ext:StoreParameter Name="MonthsBack" Value="24" />                                                      
                          
                            </ExtraParams>
                    </ext:AjaxProxy>
                </Proxy>
                <Model>
                    <ext:Model ID="Model2" runat="server">
                        <Fields>
                            <ext:ModelField Name="PROJECTED_DATE" Type="String" >
                            <%--  <Convert Fn="TrimText" />--%>
                              </ext:ModelField>
                            <ext:ModelField Name="PROJECTED_USAGE_QUARTER" Type="Float" >
                            <%--  <Convert Fn="percentageConvert" />--%>
                              </ext:ModelField>
                               <ext:ModelField Name="MAX_LINE" Type="Float" />
                                <ext:ModelField Name="PERCENT_GROWTH" Type="Float" />
                        <ext:ModelField Name="PROJECTED_TREND" Type="Float" />
                        <ext:ModelField Name="PERC_GROWTH_TREND" Type="Float" />
                        <ext:ModelField Name="EST_70_DATE" Type="String" />
                        <ext:ModelField Name="EST_MAX_DATE" Type="String" />
                        
                        </Fields>
                    </ext:Model>
                </Model>

                 <DirectEvents>
                <Load OnEvent="QtrChartStoreLoad">
                <ExtraParams>
                <ext:Parameter Name="QuarterlyChartData" Value="App.QtrChartStore.getRecordsValues()" Mode="Raw" Encode="true" />
                <ext:Parameter Name="jsonRecord1" Value="Ext.encode(#{MainTable}.getRowsValues({selectedOnly:true}))"
                                            Mode="Raw" />
                </ExtraParams>
                </Load>
                </DirectEvents>


            </ext:Store>

         
        </Store>
    <Axes>
       
          <ext:NumericAxis Fields="PROJECTED_USAGE_QUARTER" Position="Left" Title="Projected Usage(Qtr)" MajorTickSteps="30">
           <%-- <GridConfig>
                <Odd Opacity="1" Fill="#ddd" Stroke="#bbb" StrokeWidth="0.5" />
            </GridConfig>--%>
        </ext:NumericAxis>


       

        <ext:CategoryAxis Fields="PROJECTED_DATE" Position="Bottom" Title="Quarters Out" />
    </Axes>
    <Series>
       
         <ext:LineSeries SeriesID="Series2" Axis="Left" XField="PROJECTED_DATE" YField="PROJECTED_USAGE_QUARTER">
            <HighlightConfig Size="7" Radius="7" />
            <MarkerConfig Type="Cross" Size="1" Radius="1" StrokeWidth="0" />
            <Tips ID="Tips11" runat="server" TrackMouse="true" Width="140" Height="35">
                <Renderer Handler="this.setTitle(storeItem.get('PROJECTED_DATE') + '<br />' + storeItem.get('PROJECTED_USAGE_QUARTER'));"></Renderer>
            </Tips>
        </ext:LineSeries>


         <ext:LineSeries SeriesID="Series11" Axis="Left" XField="PROJECTED_DATE" YField="MAX_LINE">
            <HighlightConfig Size="7" Radius="7" />
            <MarkerConfig Type="Circle" Size="1" Radius="1" StrokeWidth="0" />
            <Tips ID="Tips21" runat="server" TrackMouse="true" Width="140" Height="35">
                <Renderer Handler="this.setTitle(storeItem.get('PROJECTED_DATE') + '<br />' + storeItem.get('MAX_LINE'));"></Renderer>
            </Tips>
        </ext:LineSeries>


    </Series>

       <Plugins>
                        <ext:VerticalMarker ID="VerticalMarker1" runat="server" >
                        
                            <XLabelRenderer Handler="return value;" />
                        </ext:VerticalMarker>
                    </Plugins>
    </ext:Chart>
                        

                       


                    <%--<ext:DisplayField ID="DisplayField3" runat="server" Html="&nbsp;" Width="850" />--%>

                    <ext:DisplayField ID="DisplayField2" runat="server" Html="&nbsp;" Width="100" />

                    <ext:Container ID="Container3" runat="server" Layout="VBoxLayout" Border="true" Height="500" PaddingSpec='0 0 50 0' Margins="0 20 70 0">
                    <Items>

             

  <ext:GridPanel ID="InstanceDetailsGrid" runat="server" Height="150" Width="250" HideHeaders="true" Title="InstanceSummary" ColumnLines="true" PaddingSpec='15 0 0 0'>                   
                       
                       <Store>
                       <ext:Store ID="InstanceDetailsStore" runat="server">
                         <Model>
                        <ext:Model ID="Model9" runat="server">
                            <Fields>
                                <ext:ModelField Name="Name" Type="String" />
                                <ext:ModelField Name="value" Type="String"  />                                
                            </Fields>
                        </ext:Model>
                    </Model>
                       
                       
                       </ext:Store>
                       
                       </Store>
                        <ColumnModel ID="ColumnModel5" runat="server">
                            <Columns>
                                <ext:Column ID="Column19" runat="server" Width="120" DataIndex="Name"  Selectable="true">
                                
                        </ext:Column>
                                <ext:Column ID="Column20" runat="server"  Width="115" DataIndex="value" Flex="1" Selectable="true" >
                              
                        </ext:Column>
                               
                            </Columns>
                        </ColumnModel>

                         <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
        </SelectionModel>
        <View>
            <ext:GridView ID="GridView5" runat="server" EnableTextSelection="true">
               
            </ext:GridView>
        </View>
    
                       
                    </ext:GridPanel>


                  

                    <ext:GridPanel ID="grdApps" Title="Applications" runat="server" Frame="true" AutoScroll="true" Flex="1" Width="250"  HideHeaders="true">
                      <Store>

                                
      <ext:Store ID="AppsStore" runat="server" AutoLoad="true">
                                    <Proxy>
            <ext:AjaxProxy Json="true" Url='<%#AppsURL%>' AutoDataBind="true" >
                <ActionMethods Read="POST" Create="POST"/>     
                                 <Headers>
                                 
                                 <ext:Parameter Name="Accept" Value="application/json" />
                                 <ext:Parameter Name="Content-Type" Value="application/json" />
                                 

                                 </Headers>                       
                            <Reader>
                                <ext:JsonReader Root=""/>
                            </Reader>
                            <Writer>
                            <ext:JsonWriter Root="" Encode="true"/>                            
                            </Writer>
                            <ExtraParams>
                             <ext:StoreParameter Name="InstanceID" Value="-1"/>       
                            </ExtraParams>

                              
            </ext:AjaxProxy>
        </Proxy>
                                        <Model>
                                            <ext:Model ID="Model5" runat="server">
                                                <Fields>
                                                 <ext:ModelField Name="APPLICATION_NAME" Type="String"/>
                                                    
                                                    
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                        
                                    </ext:Store>

                                    
                                    
                                  
                                </Store>
                                 <ColumnModel ID="ColumnModel2" runat="server">
                        <Columns>
                            <ext:Column ID="Column8" runat="server" Wrap="true" Text="Application Name" Flex="1" DataIndex="APPLICATION_NAME">
                           
                            </ext:Column>
                                     </Columns>
                                     </ColumnModel>
                    
                    
                    
                    </ext:GridPanel>

                    </Items></ext:Container>
                    
                     </Items>

                        </ext:Container>


                        </Items></ext:Container>

                      </Items>
                    </ext:FormPanel>
                    </Items></ext:Window>


      <ext:Viewport ID="Viewport2" runat="server" Layout="Border">
        <Items>
      <ext:Panel ID="Panel1" runat="server" Region="Center">             
      <TopBar>                 
      <ext:Toolbar ID="ToolHead" runat="server">                     
      <Items>                         
      <ext:Button runat="server" ID="Back" Icon="ArrowLeft" Text="Back to the Summary" Width="175">
                            <DirectEvents>
                                <Click OnEvent="goBack">
                                    <EventMask ShowMask="true" />
                                
                                </Click>
                            </DirectEvents>
                        </ext:Button>                
      </Items>                 
      </ext:Toolbar>             
      </TopBar>             
      <LayoutConfig>                 
      <ext:HBoxLayoutConfig Align="Stretch" />             
      </LayoutConfig>             
      <Items> 

                
       
 

                <ext:FormPanel ID="LeftPanel" runat="server" Flex="1" Border="false" Header="false" Frame="true" >
                <LayoutConfig>
                    <ext:VBoxLayoutConfig Align="Stretch" />
                </LayoutConfig>
                <Items>

                
            
             <ext:GridPanel runat="server" ID="MainTable" AutoScroll="true" Flex="1" Title="Capacity Group Instances" ButtonAlign="Right">
                    <Plugins>
                        <ext:BufferedRenderer ID="BufferedRenderer1"  runat="server" />
                    </Plugins>
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                           <%--<ext:Column ID="Column1" runat="server" Text="Instance ID" DataIndex="DB_INSTANCE_ID" Width="40" />--%>
                            <ext:Column ID="Column2" runat="server" Text="DB Type" DataIndex="DB_TYPE_DESC" Width="125" />                            
                            <ext:Column ID="Column3" runat="server" Text="Applications" DataIndex="APPLICATIONS" Width="175" Flex="1"  >
                            <Renderer fn="appRenderer" />
                            </ext:Column>
                    
                            <ext:Column ID="Column4" runat="server" Text="Instance Name" DataIndex="INSTANCE_NAME" Width="125" />
                            <ext:Column ID="Column5" runat="server" Text="Allocated Storage(GB)" DataIndex="ALLOCATED_STORAGE" Width="125" />
                            <ext:Column ID="Column9" runat="server" Text="Used Storage(GB)" DataIndex="CURRENT_USAGE" Width="125" />
                            <ext:Column ID="Column10" runat="server" Text="% Used" DataIndex="PERCENT_USAGE" Width="125"  />
                            <ext:Column ID="Column11" runat="server" Text="Est. 70 Date" DataIndex="EST_70_DATE" Width="150" >
                           
                          
                            </ext:Column>
                            <ext:Column ID="Column6" runat="server" Text="Est. Max Date" DataIndex="EST_MAX_DATE" Width="150" Flex="1" >
                            <Renderer Fn="RenderColor" />
                           
                            </ext:Column>
                             <ext:CommandColumn ID="CommandColumn1" runat="server" Width="110">
                        <Commands>
                     
                            <ext:GridCommand Icon="ChartCurve" CommandName="ViewGraph" Text="View Graph" />
                            
                        </Commands>
                        
                        <Listeners>
                        
                       
                            <Command Handler="#{window1}.show(); App.direct.ShowChart(command,record.get('DB_INSTANCE_ID'),record.get('INSTANCE_NAME'),record.get('ALLOCATED_STORAGE'),record.get('CURRENT_USAGE'),record.get('EST_70_DATE'),record.get('EST_MAX_DATE'));" />
                        </Listeners>
                    </ext:CommandColumn>
                    
                        </Columns>
                    </ColumnModel>
                    <View>
                        <ext:GridView ID="GridView1" runat="server">
                           
                            <Listeners>
                                <Refresh Handler="#{MainTable}.body.unmask();" Delay="1" />
                            </Listeners>
                        </ext:GridView>
                    </View>
                    <%--  <SelectionModel>
                        <ext:RowSelectionModel runat="server" ID="MuseumComponentGridSelection" Mode="Single">
                        <Listeners>
                        <Select Handler="#{window1}.show();" />
                        </Listeners>
                          <DirectEvents>
                                <Select OnEvent="GridRowSelect" Buffer="250">
                                    <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="#{frmChart}" />
                                    <ExtraParams>
                                        <ext:Parameter Name="jsonRecord1" Value="Ext.encode(#{MainTable}.getRowsValues({selectedOnly:true}))"
                                            Mode="Raw" />
                                              <ext:Parameter Name="MonthChartData" Value="App.MonthlyChartStore.getRecordsValues()" Mode="Raw" Encode="true" />
                       
                                    </ExtraParams>
                                </Select>
                            </DirectEvents>
                        </ext:RowSelectionModel>
                    </SelectionModel>--%>
                 
                    <Listeners>
                    <AfterRender Handler="App.MainTable.refresh" />
                    </Listeners>
                </ext:GridPanel>              
           

         

                  </Items>

                  

                </ext:FormPanel>


            
            </Items>

            </ext:Panel>

            </Items>

            </ext:Viewport>
            <ext:Hidden ID="hdnInstanceID" runat="server" Text="InstanceID" EnableViewState="true" />
   
    </form>
</body>
</html>

**Baidaly** · Nov 11, 2013, 9:17 PM

Hello!

How do you load the Window with Charts, using IFRAME?

Generally, if you set

<LoadMask ShowMask="true"></LoadMask>

it should do what you want.

However, you can do it manually.

Mask on Button click:

<ext:Button runat="server">
    <Listeners>
        <Click Handler="#{MyWindow}.mask('Loading...');" />
    </Listeners>
</ext:Button>

And unmask it loading is done:

<Loader runat="server">
    <Listeners>
        <Load Handler="#{MyWindow}.unmask()" />
    </Listeners>
</Loader>

**elisa** · Nov 14, 2013, 3:20 PM

The typical

<LoadMask ShowMask="true" />

was not working so we tried the suggestion to manually mask and unmask the Window. For some reason this was not working in the aspx page, perhaps because all of the listeners associated to the Window loading are DirectEvent methods in code behind? In any case, we got it to work by manually calling mask and unmask on the Window object in code behind at the beginning and end of DirectEvent methods.

protected void MonChartStoreLoad(object sender, DirectEventArgs e)
{
	PopUpWindow.Body.Mask("Loading...");
	
	// code
	
	PopUpWindow.Body.Unmask();
}

Thanks for your help!

**Baidaly** · Nov 14, 2013, 10:05 PM

It seems that these two lines in one DirectEvent:

PopUpWindow.Body.Mask("Loading...");
 
// code
 
PopUpWindow.Body.Unmask();

will show the mask for a millisecond and hide it. It seems strange that this works for you. Maybe I misunderstood something?

**elisa** · Nov 15, 2013, 1:05 PM

There is actually code that is executed in between, I just didn't think it was relevant to include it.

**geoffrey.mcgill** · Nov 15, 2013, 2:51 PM

Those two lines of code will execute on the client-side. If you have code that executes server-side in between, or even client-side code in between, it's going to execute very fast, probably milliseconds.

PopUpWindow.Body.Mask("Loading...");
  
// code
  
PopUpWindow.Body.Unmask();

So, probably what you are experiencing is the expected behaviour.

Thread: [CLOSED] mask/unmask ext charts

Thread Tools

Search Thread

Display

[CLOSED] mask/unmask ext charts

Similar Threads

[CLOSED] Possible to use v2 Charts in v1 app?

How to set up dynamic charts?

MVC Charts

Wow.. extjs Charts

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] mask/unmask ext charts

Thread Tools

Search Thread

Display

[CLOSED] mask/unmask ext charts

Similar Threads

[CLOSED] Possible to use v2 Charts in v1 app?

How to set up dynamic charts?

MVC Charts

Wow.. extjs Charts

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us