第一个选项卡面板没有显示网格中的数据(ie9)

First tab panel does not show data in grid (IE 9)

本文关键字:数据 ie9 网格 显示 选项 第一个      更新时间:2023-09-26

我有一个选项卡面板,每个选项卡都有网格,但加载后,第一个选项卡中的数据缺失,但在第二个选项卡中显示良好,这在Extjs 4.2中的所有浏览器中都有效,但在Extjs 5.0中不工作。(在chrome中工作良好)在控制台没有错误。我对这个问题快疯了。可能是Extjs 5中的一个bug。提前谢谢。

//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();
          }

我看到你的代码有这些问题:

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

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

谢谢!

1)正确,不需要在标签面板上指定布局。我把这个拿出来了

2)对,不添加id是一个很好的做法,但我们正在嵌套这些组件,并通过使用这些id来显示/隐藏。

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

a)在网格中,我们使用'pagingtoolbar'并在底部显示(在整个应用程序中相同)

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

我们正在使用CARD布局,当我们拿出面板时,它总是显示在底部,即使网格只有5条记录,它看起来很奇怪,我们不想把它放在顶部(dock: 'top')

b)其他问题是有时列标头和数据不对齐

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

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

4)我们有这样的用例,如果网格没有任何数据,那么不显示选项卡。所以我们必须手动显示/隐藏选项卡。

让我把这些类组合起来&上传它们(但可能需要时间,因为我必须只取出必要的对象:()。

再次感谢您的帮助!

我的网格在面板内,这个面板在主选项卡面板内。如果我移除了Gris上的面板,那么它可以正常工作。

//这不起作用(不显示数据在第一个选项卡)

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

我猜这是Extjs 5.0中的一个bug,相同的代码可以在Extjs 4.2和Chrome中工作。

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

bufferedRenderer: false,

在Extjs 5中,默认情况下它是正确的,当网格在带有分页的面板内时,它在IE中行为不正确。之后一切都很好:)谢谢