注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

北漂的小羊

Java编程,开发者,程序员,软件开发,编程,代码。新浪微博号:IT国子监

 
 
 

日志

 
 
关于我

在这里是面向程序员的高品质IT技术学习社区,是程序员学习成长的地方。让我们更好地用技术改变世界。请关注新浪微博号: IT国子监(http://weibo.com/itguozijian)

网易考拉推荐

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

2012-10-17 07:56:00|  分类: Ext Js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
有三种方法解决此问题:

 第一种是:
     设置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.    
  评论这张
 
阅读(2968)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016