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.    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值