2012-07-06 4 views
2

ExtJS 3에서 그리드를 자동 너비로 설정하는 방법은 무엇입니까? 아래 코드를 시도했지만 작동하지 않습니다.ExtJS 3 그리드 자동 폭

덕분에 extjs에서

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

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

그리드의 폭은 물론 용기 폭이 걸립니다. Ext.grid.GridPanel # autoExpandColumn은 쉬고있는 수평 공간을 그리드에서 하나의 열로 확장하는 데 도움이됩니다. 또한 Ext.grid.GridView의 forceFitautoFill 열의 너비를 조정하는 데 도움이 될 것입니다.

0

은 당신의 디자인

1.Try width: '100%' 언젠가 문제를 야기 height: '100%' \ autoHeight:true 있지만 autoHeight:true에 따라 할 수있는 여러 가지 방법이 있지만 폭은 항상 잘 작동합니다. 코드 아래

구석 구석 그리드 문제 3.If는 당신은 iframe/웹 페이지

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

의 '전용'부분이있는 경우는 사용 만 스크롤 막대 함께

viewConfig: { 
     forceFit: true 
    } 

4. 언제든지 width: window.screen.width - 20을 설정할 수 있으며 (필요에 따라 수학을 적용 할 수 있도록) 비슷한 높이로 구성 할 수 있습니다.