Extjs Grid报表的自动宽度及高度的实现(适应不同显示器的方法) _JavaScript

Extjs Grid表格的自动宽度及高度的实现(适应不同显示器的方法)

有三种方法解决此问题：

?第一种是：

? ? ?设置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>??
? ?