网格问题中的initialConfig

Question

在我的网格中，我将initialConfig.columns值设置为property.This列，以便当我单击所有工具栏中的“重置”按钮时，可以重置表列顺序、宽度等。

我还有一种名为gridUtils.createClsValues的实用程序方法，它将cls值添加到我的列中(我提交的其他initComponent方法)。

initComponent: function () {

    //create class values on column values for test-automation
    gridUtils.createClsValues(this.columns, this.iLeanPrefix + '.' + this.tableId);

    this.initialConfig.columns = this.columns;

    //the rest ommitted
}

“重置”按钮后面的代码如下所示：

                ,fn: function (response) {
                    if (response == 'yes') {

                         // clear the state management for the grid
                        Ext.state.Manager.clear(grid.stateId);

                        //get default cols
                        var cols = grid.initialConfig.columns;

                        Util.logInfo('class value : ' + cols[0].cls + ' tableId : ' + grid.tableId + ' grid.columns ' + grid.columns[0].cls);

                        //cols = "portlet.packageList.packageListTable.PackageForOutletTable.id"


                        // repaint the grid using the hardcoded defaults
                        grid.reconfigure(grid.getStore(), cols);

                        //reset the filtering on the data
                        grid.store.clearFilter();

                        //reset the visual elements in the header
                        grid.filters.clearFilters();

                        grid.view.refresh();
                    }
                }

代码可以有效地从initialConfig获取列，并通过调用grid.reconfigure(.)重置列这很好地重置了一切。

在这个特性中，事情进展得很好:) ...BUT --我们的测试自动化团队发现了一个问题。单击重置按钮后，所有的initialConfig cls值都与上次创建的网格实例相同，这使我相信，不知何故，更像是一个全局对象。

我在这个JSFiddle中捕获了这个bug：

http://jsfiddle.net/GQULg/4/

您可以看到，如果单击第二个选项卡中的“重置”按钮，所有内容都匹配:列和initialConfig.column具有相同的值。但是，如果在第一个选项卡中单击，则列的值与网格列对象的cls值不同。

问题是如何处理这件事。initialConfig对象和网格类型的所有实例共有的对象吗？我该怎么解决我的问题？

Answer 1

问题不是initialConfig对象是常见的，而是columns数组是常见的。将列定义为基对象的一部分。创建的每个myGrid在其myGrid期间都使用相同的数组。

在您的小提琴中，在创建两个myGrid组件之后，看看结果：

v1.initialConfig.columns === v2.initialConfig.columns

以下是解决您的问题的两个解决方案：

1. 在columns函数中定义您的initComponent。这将确保为每个组件(http://jsfiddle.net/GQULg/5/)创建一个单独的http://jsfiddle.net/GQULg/5/数组。 initComponent: this.columns () {this.columns={ dataIndex：'id'，文本：'ID‘}，{ dataIndex：’名称‘，文本：’名称‘，过滤器：{ type：'string’} }；//.其余的}
2. 在创建columns组件时定义myGrid。为了减少代码重复，可以编写一个函数，返回列数组(http://jsfiddle.net/GQULg/6/)的相同(但不是相等)实例。 /** *定义列*/ getColumnCfg() {返回{ dataIndex：'id'，文本：'ID‘}，{ dataIndex：’名称‘，文本：’名称‘，筛选器：{ type：'string’}；} var v1 = Ext.create('myGrid'，{ myGridId：'myGrid1'，列: getColumnCfg() }；var v2 = Ext.create('myGrid'，{ myGridId：'myGrid2'，列: getColumnCfg() } )；