1

这是我的应用程序的简要概述：

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

  1. 西 -> 树面板
  2. 中心 -> 具有“卡片”布局的容器，包含 0 个项目。

Whenever a treenode is selected, my controller will check a my-own custom property called 'node_viewId' to see whether its value is undefined or not.

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

为什么要这样设置？

每个节点代表需要在同一视图上显示的不同数据，并且需要保留视图的状态（例如，在节点 A - 用户对第一列进行排序并隐藏第二列，在节点 B - 用户对第三列进行排序并隐藏第一列柱子）。

我的实现：

我几乎让它工作了，但是在切换不同的活动项目时它并没有完全正确地显示视图。

这是我的控制器中的代码（例如，压缩版本）：

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”和包含 1 个标题行的网格，该行由以下 2 列组成：“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' 有由 2 个按钮组成的停靠项。当我删除它时，问题就消失了。这就是我拥有停靠项目的方式：

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

有任何想法吗？

4

1 回答 1

0

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

于 2012-04-22T11:43:16.257 回答