GridPanel: Group commands don't work correctly after grid.Reconfigure

[Yury]

Hello,

Grid group commands (image and grid) doesn't work correctly with Reconfigure method;

Code example below

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    private static string[] LAST_NAMES = new string[] { "Jones", "Smith", "Lee", "Wilson", "Black", "Williams", "Lewis", "Johnson", "Foot", "Little", "Vee", "Train", "Hot", "Mutt" };
    private static string[] FIRST_NAMES = new string[] { "Fred", "Julie", "Bill", "Ted", "George", "John", "Mark", "Mike", "Chris", "Bob", "Travis", "Kelly", "Sara" };
    private static string[] CITIES = new string[] { "New York", "Los Angeles", "Chicago", "Houston", "Philadelphia", "Phoenix", "San Antonio", "San Diego", "Dallas", "San Jose" };
    private static string[] DEPARTMENTS = new string[] { "Development", "QA", "Marketing", "Accounting", "Sales" };
    private static Random RANDOM = new Random();

    public class Employee
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int No { get; set; }
        public string Department { get; set; }
    }
    
    private string[] GetUnigueName(List<string> usedNames)
    {
        string firstName = FIRST_NAMES[RANDOM.Next(FIRST_NAMES.Length)];
        string lastName = LAST_NAMES[RANDOM.Next(LAST_NAMES.Length)];
        string[] name = new string[] { firstName, lastName };
        string key = firstName + lastName;

        if (usedNames.Contains(key))
        {
            return this.GetUnigueName(usedNames);
        }
        else
        {
            usedNames.Add(key);
            return name;
        }
    }

    private object[] GetEmployeesData()
    {
        Employee[] data = new Employee[20];
        List<string> usedNames = new List<string>();

        for (int i = 0; i < 20; i++)
        {
            string[] name = this.GetUnigueName(usedNames);
            data[i] = new Employee()
            {
                FirstName = name[0],
                LastName = name[1],
                No = int.Parse(RANDOM.Next(100, 200).ToString() + RANDOM.Next(100, 200).ToString()),
                Department = DEPARTMENTS[RANDOM.Next(DEPARTMENTS.Length)]
            };
        }

        return data;
    }

    private AbstractStore GetEmployeesStore()
    {
        Store store = new Store();
        store.GroupField = "FirstName";
        store.Data = this.GetEmployeesData();
        store.Fields.Add("FirstName", "LastName", "No", "Department");

        return store;
    }

    private List<ColumnBase> GetEmployeesColumns()
    {
        return new List<ColumnBase>
        {
            new Column()
            {
                Text = "First Name",
                DataIndex = "FirstName",
                Flex = 1   
            },
            new Column()
            {
                Text = "Last Name",
                DataIndex = "LastName",
                Flex = 1   
            },
            new Column()
            {
                Text = "Employee No.",
                DataIndex = "No",
                Width = 120
            },
            new Column()
            {
                Text = "Department",
                DataIndex = "Department",
                Flex = 1
            }
        };
    }

    protected void ShowEmployeesButton_Click(object sender, DirectEventArgs e)
    {
        var columns = this.GetEmployeesColumns();

        columns.Insert(0, new ImageCommandColumn()
        {
            Commands =
            {
                new ImageCommand { CommandName = "AA", Icon = Icon.ApplicationAdd }
            },

            GroupCommands = 
            {
                new GroupImageCommand { CommandName= "BB", Icon = Icon.ApplicationEdit }
            }
        });

        X.Js.Call("Ext.suspendLayouts");
        this.GridPanel1.Reconfigure(this.GetEmployeesStore(), this.GetEmployeesColumns());
        X.Js.Call("Ext.resumeLayouts", true);
    }

    protected void ShowEmployeesButton2_Click(object sender, DirectEventArgs e)
    {
        GridPanel2.ColumnModel.Columns.AddRange(this.GetEmployeesColumns());
        Store2.RemoveFields();

        foreach (string str in new string[] { "FirstName", "LastName", "No", "Department" })
        {
            Store2.AddField(new ModelField { Name = str }, false);
        }

        Store2.RebuildMeta();
        
        X.Js.Call("Ext.suspendLayouts");
        this.GridPanel2.Reconfigure();
        X.Js.Call("Ext.resumeLayouts", true);

        Store2.DataSource = this.GetEmployeesData();
        Store2.DataBind();
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Reconfigure GridPanel - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Viewport runat="server"  Margins="0 0 10 0">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Center" Pack="Center" />
            </LayoutConfig>
            <Items>
                <ext:TabPanel runat="server" Width="500" Height="330">
                    <LayoutConfig>
                        <ext:VBoxLayoutConfig Align="Stretch" />
                    </LayoutConfig>
                    <Items>
                        <ext:GridPanel 
                            ID="GridPanel1" 
                            runat="server" Title="Example 1">
                            <TopBar>
                                <ext:Toolbar runat="server">
                                    <Items>
                                        <ext:Button 
                                            ID="ShowEmployeesButton" 
                                            runat="server" 
                                            Text="Show Employees" 
                                            OnDirectClick="ShowEmployeesButton_Click"
                                            Margins="0 0 0 10" />
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <ViewConfig EmptyText="Click a button to show a dataset" DeferEmptyText="false" />
                            <Features>
                                <ext:Grouping runat="server">
                                </ext:Grouping>
                            </Features>
                        </ext:GridPanel>

                        <ext:GridPanel 
                            ID="GridPanel2" 
                            runat="server" Title="Example 2">
                            <TopBar>
                                <ext:Toolbar runat="server">
                                    <Items>
                                        <ext:Button 
                                            ID="Button1" 
                                            runat="server" 
                                            Text="Show Employees" 
                                            OnDirectClick="ShowEmployeesButton2_Click"
                                            Margins="0 0 0 10" />
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <Store>
                                <ext:Store ID="Store2" runat="server" IgnoreExtraFields="false" GroupField="FirstName">
                                    <Model>
                                        <ext:Model runat="server">
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <ViewConfig EmptyText="Click a button to show a dataset" DeferEmptyText="false" />
                            <ColumnModel runat="server">
                                <Columns>
                                    <ext:ImageCommandColumn runat="server" Width="36">
                                        <Commands>
                                            <ext:ImageCommand CommandName="AA" Icon="Add" />
                                        </Commands>
                                        <GroupCommands>
                                            <ext:GroupImageCommand CommandName="BB" Icon="Anchor" Text="Text 1" />
                                        </GroupCommands>
                                    </ext:ImageCommandColumn>
                                    <ext:CommandColumn runat="server" Hidden="true">
                                        <GroupCommands>
                                            <ext:GridCommand CommandName="CC" Icon="ApplicationOsxKey" Text="Text 2" />
                                        </GroupCommands>
                                    </ext:CommandColumn>
                                </Columns>
                            </ColumnModel>
                            <Features>
                                <ext:Grouping runat="server">
                                </ext:Grouping>
                            </Features>
                        </ext:GridPanel>
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>