0

タブパネルがあり、すべてのタブにグリッドがありますが、ロード後、最初のタブのデータが欠落していますが、2番目のタブに正常に表示されます。これはExtjs 4.2のすべてのブラウザで機能していますが、Extjs 5.0ではすなわち。（クロムで正常に動作しています）コンソールにエラーはありません。私はこの問題に夢中になっています。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 を手動で設定することではありません。ID は必要ありません。
  3. オーバーネスト - 「fTab」で「firstTab」をラップする必要はありません。私たちは常に可能な限り最も浅い封じ込めチェーンを使用しようとします。
  4. タブを非表示にすることは非常に珍しいことです。うまくいかないと言っているわけではありませんが、タブを非表示にする必要がある場合は、簡単な切り替えロジックでカード レイアウトを使用できます。タブ パネルは、事実上、アクティブなカードを切り替えるためのタブ「ボタン」を備えたカード レイアウトです。

そうしないと、コードが誤動作する理由がわからないからです。a) 上記を修正し、それが役に立たない場合は b) https://fiddle.sencha.comでショーケースを準備して、それを実行して真の犯人を見つけられるようにすることをお勧めします。

于 2014-06-26T18:28:58.003 に答える
0

ありがとうございました！！

1) 右、タブ パネルでレイアウトを指定する必要はありません。これを取り出した

2) そうですね、ID を追加しないのは良い方法ですが、これらのコンポーネントをネストしており、これらの ID を使用して表示/非表示を切り替えています。

3) そうです、それが最初に頭に浮かんだことでした。グリッドからラッパー パネルを取り出すと、正常に動作し、データが表示されますが、これには 2 つの問題があります。

a) グリッドでは、「pagingtoolbar」を使用しており、ボタンに表示されます (アプリケーション全体で同じ)

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

私たちは CARD レイアウトを使用しており、パネルを取り出すと、グリッドには 5 つのレコードしかないにもかかわらず、これは常にボタンに表示されます。非常に奇妙に見えるため、これを一番上に置きたくありません (ドック: 'top' )

b) その他の問題 iis 時々列ヘッダーとデータが整列されない

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

flex:1 を取り出すと、すべての列が狭くなりすぎて、右側の垂直スペースの半分が空になります。

4) グリッドにデータがない場合、タブを表示しないというユース ケースがあります。そのため、タブを手動で表示/非表示にする必要があります。

これらのクラスを結合してアップロードしましょう (ただし、必要なオブジェクトだけを取り出す必要があるため、時間がかかる場合があります :( )。

またよろしくお願いします!!

于 2014-06-26T22:58:46.663 に答える