不知是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都会自适应页面容器了。
分享到:
相关推荐
Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分...
要实现Ext Grid的远程排序其实很简单,只要修改查询语句的排序关键字就可以了,但是,如果你的项目是使用Linq进行开发的,会发现动态修改排序关键字并不是那么容易的事,解决办法就是使用LINQ Dynamic Query Library...
extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui extjs 界面风格样式 可通过css修改自己想要的样式 extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列锁 ajax...
Ext Grid表格的自动宽度及高度的实现
本实例使用官方Ext3.1包 ...1.创建简单快捷的Ext Grid控件 代码清晰 2.Grid 读取 Xml 3.Grid 读取 json 4.Grid 读取 Excel 5.直接在 Grid 控件进行增删改查的操作 有任何疑问的同志欢迎提出即可谢谢
Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码
支持Ext3 Ext4导出excel,客户端导出表格,支持各种主流浏览器。
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
Ext grid panel 滚动条位置不变,适用于实时数据的刷新
在Ext的grid里实现带radio单选功能的gridlist
用于Ext开发Grid中遇到的所锁列的问题,这个很有帮助
EXT GRID使用EXT GRID使用 EXT GRID使用EXT GRID使用
NULL 博文链接:https://damen.iteye.com/blog/946039
一个完整的ext中grid与tree的使用,是很好的一个学习例子.
Ext grid 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列
官方例子 Ext grid filter
Grid实现中文排序的功能,重写Ext.data.Store的applySort函数
EXT grid导出EXCEL,有事例,下载后直接可用
一个EXT GRID的实例。是一个人新增人员的BS界面形式的程序。很漂亮的界面风格,很人性化的功能支持。
Ext4 grid打印,打印预览,复杂表头打印,等等都实现了!