Question

以下是我的应用的简要概述：

我有一个容器有2个区域的应用程序：

West - ＆gt; TreePanel中
中心 - ＆gt;带有'卡'布局的容器，带有0个项目。

每当选择treenode时，我的控制器将检查一个名为'node_viewId'的我自己的自定义属性，以查看其值是否未定义。

如果它未定义，它将创建一个'widget.myowngridpanel'实例（从'gridpanel'扩展）并为其分配一个唯一的商店。之后，此实例将添加到“卡片”中，并将此实例作为活动项目，以便它将显示在中心区域。

为何选择此设置？

每个节点表示需要在同一视图上显示的不同数据，并且需要保留视图的状态（例如，在节点A中 - 用户排序第1列并隐藏第2列，在节点B中 - 用户排序第3列并隐藏第1栏）。

我的实施：

我几乎可以使用它，但在切换不同的活动项时它没有正确显示视图。

这是我的控制器中的代码（为了示例目的，缩写版本）：

this.control({
    '#treePanelID' : {
        itemclick : function(pThis, pRecord, pItem, pIndex, pE, pEOpts) {

        var newCenterView,newCenterViewId,newGridStore;
        if (pRecord.data.node_type === 'NodeA' && 
            pRecord.data.node_viewId === undefined) {

             newCenterView = Ext.create('widget.myowngridpanel',{
                                title:'GridPanel NodeA',
                    columns:[{ header: 'Node A item1', dataIndex: 'name'},
                                      {header: 'Node A item2', dataIndex: 'phone'}]
                                });

             newGridStore = Ext.create('NodeAStore');
             newCenterViewId = 'nodeAID';
        }
        else
        if (pRecord.data.node_type === 'NodeB' && 
            pRecord.data.node_viewId === undefined) {

             newCenterView = Ext.create('widget.myowngridpanel',{
                                title:'GridPanel NodeB',
                    columns:[{ header: 'Node B item1', dataIndex:
                                'address'},{header: 'Node B item2', dataIndex: 'city'},
                                { header: 'Node B item3', dataIndex: 'zipcode'}]});
             newGridStore = Ext.create('NodeBStore');
             newCenterViewId = 'nodeBID';
        }

       if(newCenterView !== undefined && 
          newCenterViewId !== undefined) {
            pRecord.data.node_viewId = newCenterView.itemId = newCenterViewId;
            this.getCenterCard().add(newCenterView);
            newCenterView.bindStore(newGridStore);
        }

        this.getCenterCard().getLayout().setActiveItem(pRecord.data.node_viewId);

以下是帮助您查看问题的方案：

首先，用户选择“节点A”，进入“nodeAID”视图创建过程。您将看到它按预期显示：topBar中的标题'GridPanel NodeA'和包含这2列的1个标题行的网格：'Node A item1'和'Node A item2'。

然后，用户选择“节点B”，进入“nodeBID”视图创建过程。现在出现视图问题，你会看到：topBar上的标题'GridPanel NodeB'和带有以下列的这2个标题行的网格：

1）'Node B item1'，'Node B item2'，'Node B item3'

2）'节点A item1'，'节点A item2'

因此，由于某些原因，“NodeAID”视图中的前一个标题列也存在于“NodeBID”视图中。到目前为止我发现的是由于通过别名（widget.myowngridpanel）创建视图而发生此问题。当使用'Ext.grid.panel'直接创建视图时，它可以完美地工作。但我需要能够通过别名使其与视图创建一起工作。

如果我需要更清楚自己的描述，请告诉我。

帮助！

更新04/23：

有一个关于'widget.myowngridpanel'的信息，我没有提到，因为我认为它与该问题没有任何关系。 'widget.myowngridpanel'有dockedItems，包含2个按钮。当我删除它，问题消失了。这就是我有dockedItems的方法：

dockedItems: [{
        xtype:'toolbar',
        height:'29px',
        dock:'top',
        items:[{
            xtype:'button',
            text:'Button 1',
            action:'button1pressed'
        },{
            xtype:'button', 
            text:'Button 2',
            action:'button2pressed'
        }]
     }]

有什么想法吗？

Answer 1

尝试为您正在创建的每个面板添加唯一的stateId属性。这用于保存/恢复网格配置，例如列，顺序，位置等。

ExtJS 4：将不同的商店分配给同一视图的不同实例？

1 个答案: