Ext Grid宽高自适应
不知是Ext的Bug还是其他原因，当初始化grid并将宽度设为100%时，其宽度会变成10000px宽，高度100%则grid高度根据grid内容自适应，而不是根据其所在容器自适应，一直没有很好的办法，只能使用绝对宽高，但有时这是很不方便的。对此问题一直耿耿于怀，后来终于想出了一个办法，还真的可行，但就是感觉有点蹩脚。一般我们都通过render到指定id的层上来展现grid，虽然不能让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代码如下：
<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>
对此问题一直耿耿于怀，后来终于想出了一个办法，还真的可行，但就是感觉有点蹩脚。
一般我们都通过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都会自适应页面容器了。
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());
};
<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>
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)