[OPEN] [#369] Bug with gridpanel on tabs

[alex303]

I have TabPabel with two tabs, each of which is GridPanel. By pressing a button I try to load the data in the grids.

The complete project for VS2010 can be downloaded at http://www.fileswap.com/dl/B9aOLl3nYa/

The key snippets:

View

@using System.Collections.ObjectModel
@using Ext.Net
@using Ext.Net.MVC
@using ScriptMode = Ext.Net.ScriptMode

@{
    var ext = Html.X();
}

@ext.ResourceManager().ScriptMode(ScriptMode.Debug).SourceFormatting(true)

<script type="text/javascript">

    var reloadGrid = function (name, data, config, grid) {
        var control = grid;
        var controlId = control.getId();
        console.log("reload begin: " + controlId);
        var store = control.getStore();
        store.proxy.extraParams = { name: controlId };
        store.load({
            scope: this,
            callback: function (records, operation, success) {
                console.log("reload complete: " + controlId + " (" + success + ")");
                if (success) {
                    var sm = control.getSelectionModel();
                    sm.clearSelections();
                    sm.select(0);
                }
            }
        });
    }

</script>

@functions {

    private AbstractComponent CreateGrid(string gridId)
    {
        var ext = Html.X();
        return ext.GridPanel()
                  .ID(gridId)
                  .Title(gridId)
                  .ColumnModel(
                      ext.Column().Text("Id").DataIndex("ID"),
                      ext.Column().Text("Name").DataIndex("NAME"),
                      ext.Column().Text("Value").DataIndex("VALUE"),
                      ext.Column().Text("Date").DataIndex("DATE")

                  )
                  .SelectionModel(
                      ext.CheckboxSelectionModel().Mode(SelectionMode.Multi).ShowHeaderCheckbox(true).PruneRemoved(false)
                  )
                  .MessageBusListeners(new MessageBusListener
                      {
                          Name = "Test.Button.*",
                          Handler = "reloadGrid(name, data, config, this);"
                      })
                  .Store(
                      ext.Store()
                         .ItemID("ID")
                         .RemoteFilter(true).RemoteSort(true).RemotePaging(true).RemoteGroup(true)
                         .Buffered(true)
                         // With default value (25) loading will hang up... http://forums.ext.net/showthread.php?26505-OPEN-348-Infinity-Scrolling
                         .PageSize(50)
                         .AutoLoad(false)
                         .Model(
                             ext.Model()
                                .Name(gridId+"_model")
                                .Fields(
                                    new ModelField("ID", ModelFieldType.Int),
                                    new ModelField("NAME", ModelFieldType.String),
                                    new ModelField("VALUE", ModelFieldType.Int),
                                    new ModelField("DATE", ModelFieldType.Date)
                                 )
                          )
                         .Proxy(
                             ext.AjaxProxy()
                                .Url(Url.Action("GetGridData"))
                                .Reader(ext.JsonReader().Root("data").TotalProperty("total").IDProperty("ID"))
                                .ActionMethods(methods => methods.Read = HttpMethod.POST)
                          )
            );
    }

}

@{
    var grids = new Collection<AbstractComponent>
        {
            CreateGrid("Grid1"),
            CreateGrid("Grid2"),
        };
}

@(ext.Viewport()
     .ID("viewPort")
     .Layout(LayoutType.Border)
     .Items(ext.Panel()
               .Region(Region.North)
               .Items(
                   ext.Button()
                      .Text("Reload")
                      .Listeners(listeners => { listeners.Click.BroadcastOnBus = "Test.Button.Click"; })),
            ext.TabPanel()
               .Region(Region.Center)
               .Items(grids)
      ))

Controller

using System;
using System.Data;
using System.Web.Mvc;
using Ext.Net.MVC;

namespace TwoGrids.Controllers
{
    public class HomeController : Controller
    {
        private const int CMaxRowCount = 1001; // With value 1000 it will crashed then scroll down at end

        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public StoreResult GetGridData(string name, int? page, int? start, int limit)
        {
            var dataTable = GetData(name, start.HasValue ? start.Value : 0, limit);
            var result = this.Store(dataTable);
            result.Total = CMaxRowCount;
            return result;
        }

        private static DataTable GetData(string name, int firstRow, int maxRows)
        {
            var dataTable = new DataTable();
            dataTable.Columns.AddRange(new[]
                {
                    new DataColumn("ID", typeof (int)),
                    new DataColumn("NAME", typeof (string)),
                    new DataColumn("VALUE", typeof (int)),
                    new DataColumn("DATE", typeof (DateTime))
                });

            var randow = new Random();

            for (var i = firstRow + 1; i <= firstRow + maxRows; i++)
            {
                var row = dataTable.NewRow();
                row["ID"] = i;
                row["NAME"] = name + "_" + i;
                row["VALUE"] = randow.Next(100, 200);
                row["DATE"] = DateTime.Now;

                dataTable.Rows.Add(row);
            }

            return dataTable;
        }
    }
}

There are two bugs, but as I prepared one example, I will describe both of them in one post.

1. Grid on inactive tab is not updated. There is an error somewhere in the javascripts, as evidenced by FireBug.

Steps for localization:
1.1 Open Page
1.2 Press the button
1.3 Go to the second tab. Catch the bug - 'rows' is undefined (see attached screenshot).


UPDATE:
In additional try to do this:
1.1 Open Page
1.2 DON'T PUSH BUTTON!
1.3 Go to Tab2, Grid is empty. It's ok.
1.4 Come back at Tab1
1.5 PUSH THE BUTTON!
1.6 Go to tab2, some records are there... but try to scroll.... it only 66 records, and grid will not fetch any more.... well thrid bug...


2. Please note, the grid is buffered.
When Total (from json response) divided by the PageSize no residue, when scrolling to the end we get an error. (Changing CMaxRowCount from 1000 to 1001 at my example will make it works).
Steps for localization:
1.1 Check that CMaxRowCount is 1000 - total number in dataset
1.2 Check that grids PageSize is 100
1.3 Open page
1.4 Press the button
1.5 Scroll down by the scroller at the end. All rows wont be loaded, it will crash at line 992 (screenshot attached).