Nov 01, 2011, 5:52 AM
bindStore() causes strange behavior in Firefox
Hi,
When I run the code below everything works fine in IE.
In Firefox, after the directevent the gridpanel is not rendered, and the chart is not updated. After collapsing and then expanding pnlChart and pnlSearch both the chart is updated and the grid is rendered correctly. What could be the reason for this strange behavior?
Note: In order for the chart to work please download the file charts.pdf in the attachment, save it to the same folder as Webform1.aspx, and rename it as "charts.swf".
Regards,
When I run the code below everything works fine in IE.
In Firefox, after the directevent the gridpanel is not rendered, and the chart is not updated. After collapsing and then expanding pnlChart and pnlSearch both the chart is updated and the grid is rendered correctly. What could be the reason for this strange behavior?
Note: In order for the chart to work please download the file charts.pdf in the attachment, save it to the same folder as Webform1.aspx, and rename it as "charts.swf".
Regards,
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestWeb.WebForm1" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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>
<script type="text/javascript">
var addChart = function (pnl, xField, xCaption, yField, yCaption) {
var form = new Ext.Panel({
title: "",
border: false,
padding: 5,
layout: "fit",
items: {
id : 'columnChartV1',
xtype: 'columnchart',
store: grdReport.getStore(),
yField: yField,
url: 'charts.swf',
xField: xField,
xAxis: new Ext.chart.CategoryAxis({
title: xCaption
}),
yAxis: new Ext.chart.NumericAxis({
title: yCaption
}),
extraStyle: {
xAxis: {
labelRotation: -90
}
}
}
});
pnl.add(form);
pnl.doLayout();
};
var reloadChartData = function () {
//var chartCmp = Ext.getCmp('pnlChart').getComponent(0).getComponent(0);
var chartCmp = Ext.getCmp('columnChartV1');
var store = Ext.getCmp('grdReport').getStore();
chartCmp.bindStore(store);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Viewport ID="vpMain" runat="server" Layout="border" AutoDoLayout="true">
<Items>
<ext:Panel ID="pnlSearch" runat="server" Collapsible="True" Height="150" Region="North"
Title="North" AutoDoLayout="true" Margins="5 5 5 5" CMargins="5 5 5 5" ButtonAlign="Left">
<Items>
</Items>
<Buttons>
<ext:Button ID="btnSearch" runat="server" Text="Search" Icon="Magnifier">
<DirectEvents>
<Click OnEvent="DoSearch">
<EventMask ShowMask="true" Target="CustomTarget" CustomTarget="vpMain"></EventMask>
</Click>
</DirectEvents>
</ext:Button>
</Buttons>
</ext:Panel>
<ext:Panel ID="pnlGrid" runat="server" Layout="Fit" Region="Center" Title="" Margins="0 0 5 5">
<Items>
</Items>
</ext:Panel>
<ext:Panel ID="pnlChart" runat="server" Collapsible="true" Layout="Fit" Region="East"
Split="true" Title="East" Width="400" Margins="0 5 5 0" CMargins="0 5 5 5">
<Items>
</Items>
</ext:Panel>
</Items>
<Listeners>
<beforerender handler="addChart(pnlChart, 'Name', 'Name', 'Salary', 'Salary');" />
</Listeners>
</ext:Viewport>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Web.UI.WebControls;
using Ext.Net;
namespace TestWeb
{
public partial class WebForm1 : System.Web.UI.Page
{
private class Person
{
public int Id { get; set; }
public string Name { get; set; }
public string Surname { get; set; }
public double Salary { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!ExtNet.IsAjaxRequest)
{
DoSearch(null, null);
}
}
private IList<Person> GetData()
{
return new List<Person>()
{
new Person {Id = 1, Name = "Michael", Surname = "Wane", Salary = 100000},
new Person {Id = 2, Name = "Lisa", Surname = "Gold", Salary = 150000},
new Person {Id = 3, Name = "Erik", Surname = "Step", Salary = 110000},
new Person {Id = 4, Name = "Adem", Surname = "French", Salary = 130000}
};
}
protected void DoSearch(object sender, DirectEventArgs e)
{
var grid = CreateGrid(sender == null ? null : GetData());
pnlGrid.Items.Add(grid);
if (ExtNet.IsAjaxRequest)
{
pnlGrid.RemoveAll(true);
grid.AddTo(pnlGrid);
}
}
private GridPanel CreateGrid(IList<Person> data)
{
var grid = new GridPanel();
var store = new Store();
var reader = new JsonReader();
grid.ID = "grdReport";
grid.ClicksToEdit = 1;
grid.StripeRows = true;
grid.IDMode = IDMode.Explicit;
grid.Border = false;
grid.Title = "Center - " + (ExtNet.IsAjaxRequest ? "Ajax" : "PageLoad");
if (ExtNet.IsAjaxRequest)
{
grid.Listeners.BeforeRender.Handler = "reloadChartData();";
}
store.ID = "storeGrid";
store.Reader.Add(reader);
grid.Store.Add(store);
var rowSelectionModel = new RowSelectionModel
{
SingleSelect = true
};
grid.SelectionModel.Add(rowSelectionModel);
reader.Fields.Add("Id", RecordFieldType.Int);
reader.Fields.Add("Name", RecordFieldType.String);
reader.Fields.Add("Surname", RecordFieldType.String);
reader.Fields.Add("Salary", RecordFieldType.Float);
// Add a row numberer column
var rowNumbererColumn = new RowNumbererColumn
{
Width = Unit.Pixel(50)
};
grid.ColumnModel.Columns.Add(rowNumbererColumn);
grid.ColumnModel.Columns.Add(new Column
{
ColumnID = "Id",
DataIndex = "Id",
Header = "Id",
Width = 50
});
grid.ColumnModel.Columns.Add(new Column
{
ColumnID = "Name",
DataIndex = "Name",
Header = "Name",
Width = 200
});
grid.ColumnModel.Columns.Add(new Column
{
ColumnID = "Surname",
DataIndex = "Surname",
Header = "Surname",
Width = 200
});
grid.ColumnModel.Columns.Add(new Column
{
ColumnID = "Salary",
DataIndex = "Salary",
Header = "Salary",
Width = 100
});
if (data != null)
{
store.DataSource = data;
store.DataBind();
}
return grid;
}
}
}
Last edited by thedarklord; Nov 01, 2011 at 7:17 AM.