Question

extjs:gridpanel 列宽如何自适应浏览器的宽度

var grids = Ext.create("Ext.grid.Panel", {
store: myStore,
//height:'100%',
renderTo: grid,
layout: 'fit',
viewConfig : {
forceFit: true这个属性没有用
},

Answer 1

用.x-grid3-header-offset{width:auto;} 就可以实现；

参考代码如下：

/*store之类的就省略了*/  

  

var sm = new Ext.grid.CheckboxSelectionModel({  

    handleMouseDown : function(){}  

});  

  

var gridColumn = new Ext.grid.ColumnModel([  

    sm,  

    {header:'地市',dataIndex:'areaName',width:200},  

    {header:'品牌',dataIndex:'brandName',width:200},  

    {header:'指标',dataIndex:'busiTypeName',width:200},  

    {header:'1日',dataIndex:'day1',width:200},  

    {header:'2日',dataIndex:'day2',width:200},  

    {header:'3日',dataIndex:'day3',width:200},  

    {header:'4日',dataIndex:'day4',width:200},  

    {header:'5日',dataIndex:'day5',width:200}  

]);  

  

var gridPanel = new Ext.grid.GridPanel({  

    id: 'gridPanelId',  

    cm: gridColumn,  

    sm: sm,  

    ds: gridStore,  

    frame: true,  

    autoScroll: true,  

    height: 550,  

    tbar: topToolbar,  

    bbar: new Ext.PagingToolbar({  

        id: 'pagingToolbarId',  

        store: gridStore,  

        displayInfo: true,   

        pageSize: 10  

    })  

});  

  

var linePanel = new Ext.Panel({  

    id: 'linePanelId',  

    frame: true,  

    contentEl: 'myChartId',  

    height: 550  

});  

  

var backPanel = new Ext.Panel({  

    id: 'backPanelId',  

    frame: true,  

    autoScroll: true,  

    items: [gridPanel, linePanel]  

});  

  

new Ext.Viewport({  

    layout: 'fit',  

    items: backPanel  

注意：不要设置viewConfig: {forceFit: true}，这个是把列宽(即ColumnModel的宽度)设置为自动宽度，不是整个GridPanel的宽度。

Answer 2

只要有 layout : 'fit', 这个设置就可以自动适应窗口宽度。
关键是在你的 columns 里 至少有一项必须设置 flex : 1

flex 说明一下，它起着评分宽度的作用。
比如你的整个GRID 的宽度是 1000，列数有4个。
这时候3个列设置了 width : 300 ，剩余的一个设置 flex : 1 的话就会被分配成 宽度100.

满意请采纳，有问题请追问。