大きな複雑なオブジェクトや動的に読み込まれたオブジェクトを持つExtjsタブパネル

Question

タブパネル上の複雑なオブジェクトにはいくつか問題があります。 私は店、窓、グリッド、木が2つの複雑なオブジェクトを持っているなどここでオブジェクトの始まりです：

Ext.define('Ext.app.DocumentsContainer', { 

    extend: 'Ext.container.Container', 

    initComponent: function(){ 

     var documentsStore = Ext.create('Ext.data.Store', { 

は、そして、私は2つのパネル（オブジェクトごとに1）でタブパネルを持っています。タブパネルで、ビューポートの 完全なコード：

Ext.create('Ext.container.Viewport', { 
     layout: 'border', 
     padding: '5', 
     items: [ 
      { 
       xtype: 'container', 
       region: 'north', 
       height: 50 
      }, 
      { 
       xtype: 'tabpanel', 
       activeTab: 0, 
       region: 'center', 
       width: 100, 
       items: [ 
       { 
        xtype: 'panel', 
        title: 'Documents', 
        layout: 'border', 
        items: Ext.create('Ext.app.DocumentsContainer'), 
       },{ 
        xtype: 'panel', 
        title: 'Transmittals', 
        layout: 'border', 
        items: [Ext.create('Ext.app.TransmittalsContainer')], 
       }] 
      } 
     ], 
    }); 

私は私のページをテストし、何とか別のオブジェクトのグリッド内の1つのオブジェクトdysplaysからのデータ、またはdoesntのをdysplayすべてであるため、問題を抱えています。 しかし、両方のオブジェクトが一度に正しく動作します。 タブを開いたときにオブジェクトを動的に読み込むことで修正できますが、どうすればいいのか分かりません。 提案がありますか？

Answer 1

2つのコンポーネントの内部を知らずにExt.app.DocumentsContainerとExt.app.TransmittalsContainerあなたの質問に確実に回答することはできません。おそらく、2つの異なる内部コンポーネントに同じIDを割り当てます。これは、データが混在している理由のほとんどが原因です。

第2に、Fredericが正しいです - あなたはコンポーネントを誇張しています。 tabpanelの中の両方のパネルは、Fredericのようにtabpanelにコンポーネントを直接入れることができるため、不要です。ただし、パネルを保持するように指示している場合は、をfitに変更してください。そのレイアウトタイプは単一アイテムコンポーネント（親フレームに収まるように単一コンポーネントのサイズが決まるため）を扱うためです。

Answer 2

タブパネルを過大評価しています。タブパネルアイテムは自動的にコンテンツを伸ばします。それはあなたのために働くかもしれません。

代わりにこれを行います。ドキュメントパネルをpeパネルに変更してください（タイトルにすることができます）。

Ext.define('Ext.app.DocumentsContainer', { 

    extend: 'Ext.panel.Panel', 

    initComponent: function(){ 

     var documentsStore = Ext.create('Ext.data.Store', { 

これにタブパネルを変更します。私はまたあなたの中央領域の幅を削除しました。中心領域は残りの境界線レイアウト領域を自動的に埋めます。

Ext.create('Ext.container.Viewport', { 
     layout: 'border', 
     padding: '5', 
     items: [ 
      { 
       xtype: 'container', 
       region: 'north', 
       height: 50 
      }, 
      { 
       xtype: 'tabpanel', 
       activeTab: 0, 
       region: 'center', 
       items: [ 
        Ext.create('Ext.app.DocumentsContainer', {title:'Documents'}), 
        Ext.create('Ext.app.TransmittalsContainer', {title:'Transmittals'}) 
       ] 
      } 
     ], 
    }); 

また、ステファンが言及したように。あなたのExtJS4コードでIDを使用することは決してありません。彼らは悪であり、最終的にあなたの結果を解放します。 itemIdまたは単純なExt.DomQueryがそれを行う方法です。