2011-09-28 14 views
11

列幅またはフレックス属性を持たないグリッドを作成すると、列のデフォルトはそれぞれ100pxになります。extjs4グリッド列の幅をコンテンツの最大幅に自動的に設定する方法は?

ヘッダー区切り文字をダブルクリックすると、左側の列がその列の最大データ項目のサイズに自動的に展開されます。

いくつかの列を自動的に設定する方法はありますか?

+0

これはflex属性が達成するものではありませんか?なぜ使えないのですか?投稿にグリッド定義のコードを追加できますか? – Bryan

答えて

9

forceFit: trueグリッドビューの設定では、残りのすべての空白を塗りつぶします。

forceFit: すべての回で再比例列の幅を持っている場合はtrueを指定ブール。

各列の最初に設定された幅は、グリッドの幅が に収まるように調整され、水平スクロールを防止します。後で列が (手動またはプログラムで)サイズ変更された場合、グリッドの他の列 はグリッド幅に合わせてサイズが変更されます。

fixed:trueで構成された列は、 からサイズ変更されません。

1

たとえば、説明テキストや長い名前など、一部の列が非常に広い場合があります。フィールドの幅をautoに設定すると、一部の列が表示に大きなスペースを占めることがあります。このシナリオでは、最大幅の制限はどのくらいですか。 50 CHAR、100 CHAR?

5

だから私はforceFitがもはや煎茶によって推奨され、あなたが自動サイズメソッドを使用してみてはならないと思います。
編集:そこには、簡単な例で行く、それは最初の列に取り組んでいます:)

Ext.create('Ext.grid.Panel', { 
    title: 'Simpsons', 
    store: Ext.data.StoreManager.lookup('simpsonsStore'), 
    columns: [ 
     { text: 'Name', dataIndex: 'name', width: 150, autoSizeColumn: true }, 
     { text: 'Email', dataIndex: 'email', width: 150, autoSizeColumn: true, minWidth: 150 }, 
     { text: 'Phone', dataIndex: 'phone', width: 150 } 
    ], 
    viewConfig: { 
     listeners: { 
      refresh: function(dataview) { 
       dataview.panel.columns[0].autoSize();//works on the first colum 
      } 
     } 
    }, 
    width: 450, 
    renderTo: Ext.getBody() 
}); 

私は同じ問題を抱えていました。

関連する問題