Thank you, workaround works; but look at this example and see how the mask bhave itself. It is not very handy.
<%@ Page Language="C#" %>
<%@ Import Namespace="Ext.Net.Utilities"%>
<%@ Import Namespace="Panel=Ext.Net.Panel" %>
<%@ Import Namespace="Chart=Ext.Net.Chart" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script type="text/javascript">
var MaskChart = function ( me, selection )
{
me.setZoom( selection );
me.mask.hide();
}
</script>
<script runat="server">
protected void Page_Load(object sender,EventArgs e)
{
// Load the data into the Store and DataBind.
this.stoCharts.DataSource = this.stoChartsValue;
this.stoCharts.DataBind();
this.Form.Controls.Add(BuildWindow1()); //construct window with chart build into
}
private object[] stoChartsValue
{
get
{
return new object[]
{
new object[] {"2011/01/01",10,200,550},
new object[] {"2011/02/01",15,300,450},
new object[] {"2011/03/01",21,452,800},
new object[] {"2011/04/01",1,125,952},
new object[] {"2011/05/01",18,214,458},
new object[] {"2011/06/01",30,57,480},
new object[] {"2011/07/01",25,38,452},
new object[] {"2011/08/01",14,189,650},
new object[] {"2011/09/01",11,170,520},
new object[] {"2011/10/01",9,98,152},
new object[] {"2011/11/01",3,78,259},
new object[] {"2011/12/01",45,120,454}
};
}
}
private Window BuildWindow1()
{
return this.X().Window()
.ID("Window1")
.Title("My Window With Chart in it")
.Height(1024)
.Width(768)
.X(0)
.Y(0)
.Layout("Fit")
.Add(BuildChart());
}
private Window BuildWindow2()
{
return this.X().Window()
.ID("Window2")
.Title("My Window with chart into panel")
.Height(1024)
.Width(768)
.X(500)
.Y(500)
.Layout("Fit")
.Add(BuildPanel());
}
private Chart BuildChart()
{
Chart MyChart = new Chart();
AxisCollection MyAxes=new AxisCollection();
CategoryAxis AxesX =new CategoryAxis();
NumericAxis AxesY = new NumericAxis();
ColumnSeries MySerie1 = new ColumnSeries();
ChartTheme Browser = new ChartTheme();
Gradient GradienBar = new Gradient();
GradientStop GradientStop = new GradientStop();
Browser.Colors = new string[3];
Browser.Colors[0]="#FF0000";
Browser.Colors[1]="#00FF00";
Browser.Colors[2]="#0000FF";
Browser.ThemeName = "myBrowser";
MyChart.Bin.Add(Browser);
//Gradient for red
GradientStop.Offset = 0;
GradientStop.Color = "#800000";
GradienBar.Stops.Add(GradientStop);
GradientStop = new GradientStop();
GradientStop.Offset = 100;
GradientStop.Color = "#FF8080";
GradienBar.Stops.Add(GradientStop);
//Gradient for green
GradientStop.Offset = 0;
GradientStop.Color = "#800000";
GradienBar.Stops.Add(GradientStop);
GradientStop = new GradientStop();
GradientStop.Offset = 100;
GradientStop.Color = "#80FF80";
GradienBar.Stops.Add(GradientStop);
//Gradient for blue
GradientStop.Offset = 0;
GradientStop.Color = "#000080";
GradienBar.Stops.Add(GradientStop);
GradientStop = new GradientStop();
GradientStop.Offset = 100;
GradientStop.Color = "#8080FF";
GradienBar.Stops.Add(GradientStop);
GradienBar.GradientID = "grdConfChart";
GradienBar.Angle = 0;
MyChart.Gradients.Add(GradienBar);
AxesX.Title = "Month";
AxesX.Fields = new string[1];
AxesX.Fields[0] = "Date";
AxesY.Minimum = 0;
AxesY.Fields = new string[3];
AxesY.Fields[0] = "Value1";
AxesY.Fields[1] = "Value2";
AxesY.Fields[2] = "Value3";
MyAxes.Add(AxesX);
MyAxes.Add(AxesY);
MySerie1.SeriesID = "IdSerie1";
MySerie1.Axis = Position.Left;
MySerie1.XField = new string[1];
MySerie1.XField[0] = "Date";
MySerie1.YField = new string[3];
MySerie1.YField[0] = "Value1";
MySerie1.YField[1] = "Value2";
MySerie1.YField[2] = "Value3";
MySerie1.Stacked = true;
MyChart.StoreID = "stoCharts";
MyChart.Animate = false;
MyChart.Theme = "myBrowser";
MyChart.Legend = true;
MyChart.Axes.Add(AxesX);
MyChart.Axes.Add(AxesY);
MyChart.Series.Add(MySerie1);
MyChart.LegendConfig = new Ext.Net.ChartLegend();
MyChart.LegendConfig.RefreshOnItemToggle = true;
MyChart.Mask = ChartMask.Box;
MyChart.Listeners.Select.Fn = "MaskChart";
ConfigItem cs1= new ConfigItem();
cs1.Name = "enableMask";
cs1.Value = "true";
cs1.Mode = ParameterMode.Raw;
ConfigItem cs2 = new ConfigItem();
cs2.Name = "hasListeners";
cs2.Value = "{}";
cs2.Mode = ParameterMode.Raw;
MyChart.CustomConfig.Add(cs1);
MyChart.CustomConfig.Add(cs2);
return MyChart;
}
private Panel BuildPanel()
{
return this.X().Panel()
.ID("panChart")
.Title("Chart")
.Padding(5)
.Add(BuildChart());
}
</script>
<!DOCTYPE html protected "-//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 id="Head1" runat="server">
<title>Test Chart into panel</title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" RethrowAjaxExceptions="True">
</ext:ResourceManager>
<%-- Data stores--%>
<ext:Store ID="stoCharts" runat="server" AutoLoad="True">
<Reader>
<ext:ArrayReader />
</Reader>
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="Date" />
<ext:ModelField Name="Value1" />
<ext:ModelField Name="Value2" />
<ext:ModelField Name="Value3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</form>
</body>
</html>
it seems to be related to size of the window, but not sure, an even if window is maximized, a little drift apear between mouse position and top/lef of start mask.
It's an Ext.JS related problem, I had the same when working with Ext.JS only.It is why, I have drop the way to using mask to zomm chart.
