有三种方法解决此问题:
第一种是:
设置grid自适应宽度,首先要清楚grid放在什么容器中,设置该容器的layout:fit就行了。比如页面上如果只放置一个grid,一般改成用 Viewport,再在Viewport中包含grid就能解决问题了。
{ region:'center', layout:'fit', items:grid }
第二种是:
div:
Js代码
- <div id="divID" style="width:100%"></div>
- var width = Ext.get("divID").getWidth();
- alert(width);// 此时宽度为div的数字宽度。如1265
- // 赋值到grid上相当于
- new Ext.grid.GridPanel({
- width: 1265....
- });
第三种是:
在GridPanel里加上 bodyStyle:'width:100%',
例子:Js代码
Js代码
- <pre class="js" name="code"> var grid = new Ext.grid.GridPanel({
- //autoWidth:true,
- border:false,
- width: Ext.get('center_context_desktop').getWidth(),
- ds: new Ext.data.Store({
- reader: new Ext.data.ArrayReader({}, [
- {name: 'company'},
- {name: 'price', type: 'float'},
- {name: 'change', type: 'float'},
- {name: 'pctChange', type: 'float'},
- {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
- ]),
- data: Ext.grid.dummyData
- }),
- cm: new Ext.grid.ColumnModel([
- new Ext.grid.RowNumberer(),
- {id:'company',header: "Company", width: 120, sortable: true, dataIndex: 'company'},
- {header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
- {header: "Change", width: 70, sortable: true, dataIndex: 'change'},
- {header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'},
- {header: "Last Updated", width: 95, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
- ]),
- viewConfig: {
- forceFit:true
- },
- autoExpandColumn:'company'
- });
- //autoWidth:true,
- 这一行一定要隐藏,在ie7和ff下试了,是没有问题的.
- 同时还有bodyStyle:'width:100%',这个也试成功了 </pre>