bindStore() causes strange behavior in Firefox

  1. #1

    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,

    
    <%@ 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;
            }
        }
    }
    Attached Files
    Last edited by thedarklord; Nov 01, 2011 at 7:17 AM.
  2. #2
    Hi,

    I see this JS error in FireBug:
    this.swf.setDataProvider is not a function
    I guess it breaks layouting an the first time.

    I think this issue is not related to Ext.Net.

    Please check:
    http://www.sencha.com/forum/showthread.php?76860

    I think updating an swf file should help.
  3. #3
    Hi Daniil,

    Thanks for your effort.

    Unfortunately, it seems that the problem is not resolved with swf update.
    I googled and found some other workarounds but those didn't work for Firefox, either.

    Anyway, I'll refactor my UI rendering routine. In stead of recreating the store object each time the grid is rendered, I'll just recreate the store columns.
    I think this will solve my problem.

    You can mark this post as CLOSED.

    Thanks,
  4. #4
    Hi,

    Finally, I found a simple solution: With each DirectEvent I also called the "addChart" javascript function to recreate the chart.
    This way, I got rid of re-binding the store to the chart, and the "swf.bindDataStore is not a function" error.

    Thanks.
  5. #5
    Thanks for sharing the solution, it can help someone on the forums in the future.

Similar Threads

  1. [CLOSED] RowExpander strange behavior
    By FAS in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Apr 24, 2012, 7:37 PM
  2. Strange behavior of buttons and itextsharp
    By bovo13 in forum 1.x Help
    Replies: 3
    Last Post: Dec 22, 2011, 6:53 AM
  3. Strange behavior of hidden compositeControl
    By Zdenek in forum 1.x Help
    Replies: 1
    Last Post: Dec 13, 2011, 5:31 AM
  4. Strange behavior with Window control
    By jlattimore in forum 1.x Help
    Replies: 1
    Last Post: May 30, 2011, 11:23 AM
  5. [CLOSED] Strange behavior of fieldset
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 20, 2010, 11:55 AM

Posting Permissions