Nov 11, 2013, 4:54 PM
[CLOSED] Slider and number field
Hi,
In my application, I am using ext chart, slider, number field.
The slider and number field work in such a way that when i move the slider, it displays that value in the number field and when I type in a value in number field, it automatically moves the slider to that position. I have two sliders and two respective number fields as you can see the code below.
ultimately, the purpose of the slider is to update the ext chart based on this slider value
(slider event is fired so that chart is reloaded with data and re-drawn).
Now, the problem is that...
when i type in a number in number field, fast, it automatically deletes the last digit, fires the slider event based on first digit alone, reloads the chart and then allows me to type in a value in the number field.
e., if i try to type "24" in number field, fast, it deletes "4" and the moves the slider to the position "2". then slider event occurs based on this value -> "2" and refreshes the chart.....But i do not want this.
BUT, what I need is:
I want the number field wait patiently to know what value I am typing in....and then move the slider based on that and then fire the slider event and finally refresh the chart..
how can i do that ?
( i think this is some number field delay issue ? ...not sure..)
pls help me find a right solution...
In my application, I am using ext chart, slider, number field.
The slider and number field work in such a way that when i move the slider, it displays that value in the number field and when I type in a value in number field, it automatically moves the slider to that position. I have two sliders and two respective number fields as you can see the code below.
ultimately, the purpose of the slider is to update the ext chart based on this slider value
(slider event is fired so that chart is reloaded with data and re-drawn).
Now, the problem is that...
when i type in a number in number field, fast, it automatically deletes the last digit, fires the slider event based on first digit alone, reloads the chart and then allows me to type in a value in the number field.
e., if i try to type "24" in number field, fast, it deletes "4" and the moves the slider to the position "2". then slider event occurs based on this value -> "2" and refreshes the chart.....But i do not want this.
BUT, what I need is:
I want the number field wait patiently to know what value I am typing in....and then move the slider based on that and then fire the slider event and finally refresh the chart..
how can i do that ?
( i think this is some number field delay issue ? ...not sure..)
pls help me find a right solution...
<%@ 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=" " 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=" " 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=" " 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=" " 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=" " 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=" " Width="850" />--%>
<ext:DisplayField ID="DisplayField2" runat="server" Html=" " 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>
Last edited by Daniil; Nov 19, 2013 at 5:54 AM.
Reason: [CLOSED]
Originally Posted by Baidaly
