Ext Grid宽高自适应

 不知是Ext的Bug还是其他原因,当初始化grid并将宽度设为100%时,其宽度会变成10000px宽,高度100%则grid高度根据grid内容自适应,而不是根据其所在容器自适应,一直没有很好的办法,只能使用绝对宽高,但有时这是很不方便的。
对此问题一直耿耿于怀,后来终于想出了一个办法,还真的可行,但就是感觉有点蹩脚。
一般我们都通过render到指定id的层上来展现grid,虽然不能让grid宽高自适应,但层还是可以的。
如我们这里要用到的层是<div id="orgGrid"></div>。我们可以在这个层上设置高宽。
如<div id="orgGrid" style="width:100%;height:250px"></div>。
则在初始化grid的时候让其宽高与orgGrid宽高相同即可,并在页面resize时重新计算器宽度即可(一般高度固定还是比较好)。

js代码如下:
// ..前面若干行代码省略,如ds/colmodel等
var  orgGrid = Ext.get( " orgGrid " );   // 展示grid的容器
     var  grid  =   new  Ext.grid.GridPanel({
        title:
" 人员管理 " ,
        ds: ds,  
// 数据源
        cm: colModel,   // 列模式
        sm:selMode,     // 选择模式
        width:orgGrid.getComputedWidth(),
        height:orgGrid.getComputedHeight(),
        autoExpandColumn:
" memory " ,   // 自动扩展宽度的列
        autoScroll: true ,
        loadMask:{msg:
" 数据加载中,请稍等 " }
     });
     ds.load();
     grid.render(orgGrid);  
// 把grid铺到id为grid的容器中

window.onresize
= function (){
        grid.setWidth(
0 );
        grid.setWidth(orgGrid.getComputedWidth());
};

这样不论页面宽度怎么变化grid都会自适应页面容器了。
<script src="http://www.cnitblog.com/Files/yemoo/gg2.js" type=text/javascript></script> <script type=text/javascript> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript> </script> <script> window.google_render_ad(); </script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值