0

我有一个选项卡面板，每个选项卡都有网格，但是加载后，第一个选项卡中的数据丢失，但在第二个选项卡中显示正常，这在 Extjs 4.2 中的所有浏览器中都有效，但在 Extjs 5.0 中不起作用IE。（在 chrome 中工作正常）你在控制台上没有错误。我对这个问题越来越疯狂。可能是 Extjs 5 中的一个错误。提前致谢。

//main panel class

Ext.define('MyApp.view.MyView', {
  extend: 'Ext.tab.Panel',
  alias : 'widget.myView',
  id : 'myView',
  autoScroll : true,
  activeTab: 0,
  height: 600,

  layout: {
    type: 'column'
  },

  requires : [ 
    'MyView.view.FirstTab',
    'MyView.view.SecondTab'    
  ],

  initComponent : function() {

    this.items = [
      {  
       xtype: 'panel', 
       id: 'fTab',
       autoScroll: true, 
       items: [ { xtype: 'firstTab' }] 
      },
      {  
        xtype: 'panel', 
        id: 'sTab',
        autoScroll: true,
        items: [ { xtype: 'secondTab' } ] 
      }
  ];

    this.callParent(arguments);
  }
});

     //controller 

         var isActivieTabSet = false;

         // if store1 has data show the first tab
         if(store1Count > 0) {
            var tab0 = myView.down('#fTab');
            tab0.tab.show();
            if (!isActivieTabSet) {
              searchSummaryView.setActiveTab(tab0);
              isActivieTabSet = true;
            }          

          } else {
            myView.down('#fTab').tab.hide();
          }

          //check if store2 has data
          if(store2Count > 0) {
            var tab1 = myView.down('#sTab');
            tab1.tab.show();
            if (!isActivieTabSet) {
              myView.setActiveTab(tab1);
              isActivieTabSet = true;
            }
          } else {
            myView.down('#sTab').tab.hide();
          }
4

3 回答 3

1

我看到您的代码存在以下问题：

  1. 您不应该在选项卡面板上设置布局。选项卡面板在内部使用卡片布局，很可能它会忽略任何传递的布局，但如果您设置它可能会让开发人员感到困惑
  2. 您在组件上设置了 id - 它们在您发布的代码中是唯一的，但对于整个应用程序可能并非如此。一般规则是不要手动设置 id - 你不需要它们。
  3. 你过度嵌套 - 你不需要将 'firstTab' 包裹在 'fTab' 中。我们总是尽量使用最浅的遏制链。
  4. 隐藏标签是非常不寻常的。我并不是说它不起作用，但是如果您需要隐藏选项卡，那么您可以使用带有一些简单切换逻辑的卡片布局。选项卡面板实际上是一种卡片布局，带有选项卡“按钮”来切换活动卡片。

否则，代码不会给出为什么它应该行为不端的线索。我建议 a) 修复上述问题，如果没有帮助 b) 在https://fiddle.sencha.com上准备一个展示，以便我可以运行它并找到真正的罪魁祸首。

于 2014-06-26T18:28:58.003 回答
0

我的网格位于面板内，而此面板位于主选项卡面板内。如果我移除了 Gris 上的面板，那么它工作正常。

//这不起作用（不在第一个选项卡中显示数据）

      {  
       xtype: 'panel', 
       id: 'fTab',
       autoScroll: true, 
       items: [ { xtype: 'firstTab' }] 
      },
//this works 
      {  
       xtype: 'firstTab' 
      }

我猜这是 Extjs 5.0 中的一个错误，相同的代码适用于 Extjs 4.2 和 Chrome。

好的，我找到了解决方案，我必须在网格上添加它。

bufferedRenderer: false,

在 Extjs 5 中，默认情况下它是 true，当 Grid 位于具有分页的 Panel 内时，它在 IE 中的行为不正确。在此之后一切都很好:)谢谢

于 2014-06-25T06:25:30.580 回答
0

谢谢！！

1) 对，无需在选项卡面板上指定布局。我把这个拿出来了

2) 是的，不添加 Id 是一个好习惯，但我们正在嵌套这些组件并使用这些 id 显示/隐藏。

3）对，这是我想到的第一件事，从网格中取出包装面板，它工作正常并显示数据，但是我们有两个问题。

a）在网格中，我们使用“分页工具栏”并显示在底部（在整个应用程序中相同）

    this.dockedItems = [ { xtype: 'pagingtoolbar', store: this.store, displayInfo: true,  
 dock: 'bottom' } ];

我们正在使用 CARD 布局，当我们取出面板时，即使网格只有 5 条记录，它总是显示在底部，而且看起来很奇怪，我们不想把它放在顶部（dock：'top'）

b）其他问题ii有时列标题和数据未对齐

 {header: 'Number', dataIndex: 'number', flex: 1 }

如果我取出 flex:1，那么所有的列都会变得太窄，右边的垂直空间的一半是空的。

4）我们有这个用例，如果网格没有任何数据，则不显示选项卡。所以我们必须手动显示/隐藏选项卡。

让我合并这些类并上传它们（但可能需要时间，因为我只需要取出必要的对象:()。

再次感谢您的帮助！！

于 2014-06-26T22:58:46.663 回答