Ext JSグリッドは「フィット」レイアウトでもパネルを塗りません

Question

グリッドをパネル内の全領域に占有しようとしていますが、このフォーラムを検索した後、フィットレイアウトがこのような場合に役立つはずです。しかし、私はまだそれを行うには問題を抱えています。

  { 
      xtype:'panel', 
      layout:'fit', 
      items: [{ 
        xtype: 'grid', 
        store: 'DimensionStore', 
        id: 'dimension-grid', 
        padding: '0 5 0 5', 
        viewConfig: { emptyText: '<div style="padding:10px;">No dimensions found...</div>' }, 
        columns: [{ 
           header: 'Name', dataIndex: 'DimensionName', flex: 2 
           }] 
        } 
        }] 
     } 

それが動作する唯一の方法は、グリッドのための絶対的な高さを設定することですが、パネル+グリッドが拡張され、それが拡大しますないときに見栄えdoesntのウィンドウ内にあるので、それは目的を敗北します。

Answer 1

あなたが私たちに示したイメージに基づいて、レイアウトの問題は、テキストフィールドとグリッドを含む上部の「寸法」パネルにあるようです。実際には、グリッドではなくレイアウトを担当するコンポーネントです。

これをどのように使用するかによって、できることはいくつかあります。最も簡単な解決策は、「vbox」レイアウトを使用することです。 「寸法」パネルには2つの項目があり、1つはテキストフィールドを含む固定高さのパネル用、もう1つはフレックスが1のグリッドを含みます。そのようにしてグリッドは残りの領域を埋めるでしょう。

Ext.layout.container.VBox documentation

また、同じことを行うことができる「フィット」レイアウトで「中央」領域として、「北」領域としてあなたのテキストフィールドとグリッドとの境界線のレイアウトを使用することができます。

Ext.layout.container.Border documentation

これは、すべての制限されたコードサンプルとリンクされた画像をオフに基づいています。さらなる支援を容易にするために、より完全なコード例を提供する必要があります。