A JavaScript Fancier

伟大的javascript技术研究中...

  IT博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  304 随笔 :: 0 文章 :: 483 评论 :: 0 Trackbacks


不知是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都会自适应页面容器了。
<
posted on 2008-05-30 11:09 Yemoo'S JS Blog 阅读(8093) 评论(3)  编辑 收藏 引用 所属分类: javascript技巧总结Js框架组件

评论

# re: 实现Ext Grid宽高自适应 2008-07-01 15:58 hopesfish
收益非浅,thx,以后常来你这里踩踩  回复  更多评论
  

# re: 实现Ext Grid宽高自适应 2008-11-14 17:01 宁静
bodyStyle:'width:100%;',
用这个搞定  回复  更多评论
  

# re: 实现Ext Grid宽高自适应 2010-03-25 16:14 donye
你的自适应好像只有memory这列去填充,当列比较多的时候,该怎么办,有没有更好一点的办法啊?  回复  更多评论
  

只有注册用户登录后才能发表评论。