extjs 网格 - 如何使列宽 100% [英] extjs grid - how to make column width 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
            }

如果我只有一列，如何使列宽 = 100%或者如果我有几列 - 如何使最后一列拉伸到网格末尾?

if i have only one column how can i make column width = 100% or if i have several columns - how to make last column stretch to end of grid?

推荐答案

对于 ExtJS3，在 GridPanels viewConfig 上设置 forceFit.请参阅:http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.grid.GridView

For ExtJS3, set forceFit on the GridPanels viewConfig. See: 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 结合使用.

For ExtJS 4 set forceFit directly on the GridPanel: http://docs.sencha.com/ext-js/4-0/#/api/-cfg-forceFit and use it in conjunction with flex on your columns.

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'       
    }
});

这篇关于extjs 网格 - 如何使列宽 100%的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！