PDA

View Full Version : [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({selectedOnl y: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({selectedOnl y: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({selectedOnl y: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({selectedOnl y: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({selectedOnl y: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_INSTAN CE_ID'),record.get('INSTANCE_NAME'),record.get('AL LOCATED_STORAGE'),record.get('CURRENT_USAGE'),reco rd.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({selectedOnl y: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.