5

私はここで2つの同様の質問を見つけましたが、それらは私を助けませんでした.私のコードは次のとおりです:

var grid = Ext.create('Ext.grid.Panel', {
    autoScroll: true,
    // if set this to any numeric value, then everything works just good, but 
    // i was hoping that `ExtJS` already can detect browser window height, am i wrong ?
    height: '100%', 
    title: 'Products',
    store: store,
    itemId: 'product_grid',
    columns: [.. columns skipped ...],
    plugins: [ rowEditing ],
    dockedItems: [ ..addRow button here..]
});
var panel = Ext.create('Ext.panel.Panel', {
    autoScroll: true,
    items: [
    {
        xtype: 'productGrid'
    }
    ]
});
Ext.create('Ext.container.Viewport', {
    layout: 'fit',
    items: panel
});

ブラウザウィンドウ全体を埋めるスクロール可能なグリッドが必要ですが、ここのグリッドは高さが拡張されないため、グリッドの行が0の場合、高さが0になり、「行の追加」を押すと、追加された行がスクロールバーによって隠されているように見えます。醜く見える。

また、グリッドにブラウザ ウィンドウに収まりきらない行が含まれている場合、ページ スクロールバーが表示され (グリッドのスクロールバーではありません!)、これがページ全体をスクロールするため、ボタン バーがスクロールされてしまいます。

私のセットアップの何が問題なのか考えてみてください。

アップデート：

最後に修正しました。中間パネルにもレイアウトが含まれている必要があります: 'fit'

4

2 に答える 2

7

ここでできることがいくつかあります。まず、fit子コンポーネントが使用可能なスペースを埋めるように、ビューポートでレイアウトを使用します。次に、グリッドはパネルです。パネルにグリッドをネストする必要はありませんし、おそらくそうすべきではありません。

構成はautoScrollグリッドでは機能しません。両方向へのスクロールはデフォルトで有効になっていますが、変更する必要がある場合はscrollプロパティを使用してください。最後に、height構成は数値のみを受け取り、文字列やパーセンテージでは機能しません。高さを指定すると、レイアウト マネージャーによって指定された高さが上書きされ、レイアウトには必要ありませんfit。

var grid = Ext.create('Ext.grid.Panel', {
    title:       'Products',
    store:       store,
    itemId:      'product_grid',
    columns:     [/* ... */],
    plugins:     [rowEditing],
    dockedItems: [/* ... */]
});

var viewport = Ext.create('Ext.container.Viewport', {
    layout: 'fit',
    items:  [grid]
});
于 2012-08-28T12:07:12.283 に答える