web-dev-qa-db-ja.com

extjsグリッド-列幅を100％にする方法

プロパティwidthはピクセル幅です。

{
                xtype: 'grid',
                store: store,
                selModel: Ext.create('Ext.selection.CheckboxModel', {
                    mode: 'SINGLE'
                }),
                layout: 'fit',
                columns: [
                    {
                        text: "pum",
                        dataIndex: 'SRD_NAME_FL',
                        width: 400
                    }
                ],
                columnLines: true
            }

列が1つしかない場合、列幅= 100％にする方法、または複数の列がある場合-最後の列をグリッドの最後まで伸ばす方法は？

gridextjs4
12
Subdigger

ExtJS3の場合、GridPanels forceFitにviewConfigを設定します。参照： http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.grid.GridView

ExtJS 4の場合、GridPanelで直接forceFitを設定します： http://docs.sencha.com/ext-js/4-0/#/api/-cfg-forceFit 列のflexと組み合わせて使用​​します。

v4の例

var p = Ext.Create('Ext.grid.Panel',{
    forceFit: true,
    columns: [{
        xtype: 'gridcolumn',
        header: _ll.id,
        sortable: true,
        resizable: false,
        flex: 0, //Will not be resized
        width: 60,
        dataIndex: 'Id'
    }, {
        xtype: 'gridcolumn',
        header: __ll.num,
        sortable: true,
        resizable: true,
        flex: 1,
        width: 100,
        dataIndex: 'number'       
    }
});

v3の例

var p = new Ext.grid.GridPanel({
    viewConfig: {
            forceFit: true
    },
    columns: [{
        xtype: 'gridcolumn',
        header: _ll.id,
        sortable: true,
        resizable: false,
        fixed: true, //Will not be resized
        width: 60,
        dataIndex: 'Id'
    }, {
        xtype: 'gridcolumn',
        header: __ll.num,
        sortable: true,
        resizable: true,
        width: 100,
        dataIndex: 'number'       
    }
});
28
Rem.co

追加 flex : 1ストレッチしたい列に。

9
Ali Jalbani

ExtJS 4の場合、幅の代わりにフレックスを使用します。 flex：1を設定し、列が1つしかない場合、幅は100％になります。 2つの列があり、flex：1を両方に設定した場合、両方の幅は50％になります。

Flexは、使用可能な幅を列間で比率で分配します。たとえば、1つの列に対してflex：2、他の2つの列に対してflex：1と言うと、最初の列は他の2つの列の2倍の幅になります。フレックスに10進値を使用することもできます。 0.5

2
Farish

グリッドに単一の列がある場合、items:[{}]表記とitems:{}表記の使用には大きな違いがあることに注意してください。

実際、これは期待どおりに機能しません（少なくともExtJS 4.2では）：

Ext.define('My.SingleColumnGrid', {
    extend: 'Ext.grid.Panel',
    store: {type: 'someStore'},
    forceFit: true,
    columns: {
        items: [
            {
                text: 'Something',
                flex: 1,
                dataIndex: 'something'
            }
        ]
    }
});

角かっこを削除するだけで、魔法のように期待どおりに機能し始めます（つまり、グリッド幅を埋めるために拡張する単一の列があります）。

これはほとんど私を夢中にさせました;-P。

0
Nux