extjs:gridpanel 列宽如何自适应浏览器的宽度
store: myStore,
//height:'100%',
renderTo: grid,
layout: 'fit',
viewConfig : {
forceFit: true这个属性没有用
}, 展开
推荐于2016-08-11
用.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的宽度。
2023-07-25 广告
关键是在你的 columns 里 至少有一项必须设置 flex : 1
flex 说明一下,它起着评分宽度的作用。
比如你的整个GRID 的宽度是 1000,列数有4个。
这时候3个列设置了 width : 300 ,剩余的一个设置 flex : 1 的话就会被分配成 宽度100.
满意请采纳,有问题请追问。