Question

我有一个标签面板，每个标签都有网格，但加载后，第一个标签中的数据丢失，但在第二个标签中显示正常，这适用于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();
          }

Answer 1

我在您的代码中看到了这些问题：

您不应在标签面板上设置布局。选项卡面板在内部使用卡片布局，很可能忽略任何传递的布局，但如果你设置它可能会让开发人员感到困惑
您在组件上设置了ID - 它们在您发布的代码中是唯一的，但对于整个应用程序可能不是这样。一般规则不是手动设置ID - 您不需要它们。
你太过分了 - 你不需要先包装＆＃39; firstTab＆＃39;在＆＃39; fTab＆＃39;。我们总是尝试使用最浅的密封链。
隐藏标签很不寻常。我并不是说它不会起作用，但是如果你需要隐藏一个标签，那么你可以使用一些简单的开关逻辑进行卡片布局。标签面板实际上是一个卡片布局，带有标签＆＃34;按钮＆＃34;切换有效卡。

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

Answer 2

我的网格位于面板内，此面板位于主tabpanel内。如果我将面板移过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中，默认情况下是正确的，当Grid位于具有分页的Panel中时，它在IE中的行为不正确。在这之后一切都很好:)谢谢

Answer 3

谢谢！

1）右，无需在选项卡面板上指定布局。我拿出来了

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

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

a）在网格中我们正在使用＆＃39; pagingtoolbar＆＃39;并显示在底部（在整个应用中相同）

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

我们正在使用CARD布局，当我们取出面板时，即使网格只有5条记录，它总是显示在底部，看起来非常奇怪，我们不想把它放在顶部（底座）：＆＃39; top＆＃39;）

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

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

如果我取出flex：1则所有列都变得太窄而右边的一半垂直空间是空的。

4）我们有这个用例，如果网格没有任何数据，那么就不要显示标签。所以我们必须手动显示/隐藏标签。

让我结合这些课程和上传它们（但它可能是时间因为我必须只取出必要的对象:(）。

再次感谢您的帮助!!

第一个选项卡面板不显示网格中的数据（IE 9）

3 个答案: