2012-07-06 74 views
2

在ExtJS 3中,如何将网格设置为自动宽度?我尝试了下面的代码,它不起作用。ExtJS 3 grid autowidth

感谢

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

回答

3

从ExtJS的3个文档:如果没有指定,

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'). 

Grid的宽度默认情况下,当然需要的容器宽度。 Ext.grid.GridPanel#autoExpandColumn将有助于扩展网格中的一列,以获得静止的水平空间。也将帮助他们查看Ext.grid.GridView的forceFit自动填充调整列的宽度。

0

有多种方式来做到这一点根据您的设计

1.Try width: '100%'autoHeight:true虽然autoHeight:true \ height: '100%'某个时候产生的问题,但宽度正常工作始终。

2.使用下面的代码,如果你的网格是你的iframe /网页

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

3.如果问题的“唯一”的一部分是只与滚动条,然后用

viewConfig: { 
     forceFit: true 
    } 

4.您可以随时设置width: window.screen.width - 20(根据您的需要在其周围应用一些数学算法)和类似的高度。