Question

在ExtJS 3中，如何将网格设置为自动宽度？我已经尝试过以下代码，但它不起作用。

由于

var exceptionGrid = new Ext.grid.GridPanel({
    store: exceptionStore,
    loadMask: true,
    frame: true,
    // defaultWidth: 450,
    //height: 560,
    autoHeight: true,
    autoWidth: true,
    colModel: new Ext.grid.ColumnModel({
        defaults: {
            width: 120,
            sortable: true
        },
        columns: [{
            header: 'COL1',
            dataIndex: 'COL1'
        }, {
            header: 'COL2',
            dataIndex: 'COL2'
        }, {
            header: 'COL3',
            dataIndex: 'COL3'
        }, .....]
    }),
    viewConfig: {
        forceFit: false
    }
});

Answer 1

来自extjs 3 docs：

GridPanel

Notes:

 - Although this class inherits many configuration options from base
   classes, some of them (such as autoScroll, autoWidth, layout, items,
   etc) are not used by this class, and will have no effect.

 - A grid requires a width in which to scroll its columns, and a height
   in which to scroll its rows. These dimensions can either be set
   explicitly through the height and width configuration options or
   implicitly set by using the grid as a child item of a Container which
   will have a layout manager provide the sizing of its child items (for
   example the Container of the Grid may specify layout:'fit').

默认情况下，网格的宽度如果未指定，则会占用容器宽度。 Ext.grid.GridPanel＃ autoExpandColumn 将有助于扩展网格中的一列，占用静止的水平空间。另外还有助于查看Ext.grid.GridView的 forceFit 和 autoFill 调整列的宽度。

Answer 2

根据您的设计，有多种方法可以做到这一点

1.尝试width: '100%'和autoHeight:true虽然autoHeight:true \ {{{}}会在某个时候出现问题，但宽度始终正常。

2.如果您的网格是iframe /网页的“唯一”部分，请使用以下代码

height: '100%'

3.如果问题仅出在滚动条上，请使用

   var viewport=new Ext.Viewport({
       layout: 'fit',
            monitorResize : true,
            items: [exceptionGrid ]
    })

4.你可以随时设置viewConfig: { forceFit: true }（根据你的需要在它周围应用一些数学运算）和类似的高度。

ExtJS 3网格自动宽度

2 个答案: