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

 

有三种方法解决此问题：

 第一种是：

     设置grid自适应宽度，首先要清楚grid放在什么容器中，设置该容器的layout:fit就行了。比如页面上如果只放置一个grid，一般改成用 Viewport，再在Viewport中包含grid就能解决问题了。

{
region:'center',
layout:'fit',
items:grid
} 

 

第二种是：

     div:   

Js代码 

1. <div id="divID" style="width:100%"></div>    
2.     
3.   var width = Ext.get("divID").getWidth();     
4.       alert(width);// 此时宽度为div的数字宽度。如1265       
5.     // 赋值到grid上相当于    
6.     new Ext.grid.GridPanel({    
7.        width: 1265....    
8.    });  

第三种是：

   在GridPanel里加上 bodyStyle:'width:100%', 

例子：Js代码

Js代码 

1. <pre class="js" name="code">    var grid = new Ext.grid.GridPanel({    
2.             //autoWidth:true,    
3.             border:false,    
4.             width: Ext.get('center_context_desktop').getWidth(),     
5.             ds: new Ext.data.Store({    
6.                 reader: new Ext.data.ArrayReader({}, [    
7.                    {name: 'company'},    
8.                   {name: 'price', type: 'float'},    
9.                    {name: 'change', type: 'float'},    
10.                   {name: 'pctChange', type: 'float'},    
11.                   {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}    
12.                ]),    
13.                data: Ext.grid.dummyData    
14.            }),    
15.            cm: new Ext.grid.ColumnModel([    
16.                new Ext.grid.RowNumberer(),    
17.                {id:'company',header: "Company", width: 120, sortable: true, dataIndex: 'company'},    
18.                {header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},    
19.                {header: "Change", width: 70, sortable: true, dataIndex: 'change'},    
20.                {header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'},    
21.                {header: "Last Updated", width: 95, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}    
22.            ]),    
23.        
24.            viewConfig: {    
25.                forceFit:true    
26.            },    
27.            autoExpandColumn:'company'    
28.        });    
29.    //autoWidth:true,    
30.    这一行一定要隐藏,在ie7和ff下试了,是没有问题的.    
31.    同时还有bodyStyle:'width:100%',这个也试成功了 </pre>  
32.