不知是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表格的自动宽度及高度的实现”这一主题时,我们深入解析如何在Ext JS框架下,利用其强大的Grid组件自适应容器尺寸,实现表格宽度与高度的自动调整。这一技术对于构建响应式、用户友好的界面至关重要...
- **响应式设计**:EXT4.3支持响应式布局,可以自适应不同设备和屏幕尺寸,确保动态表单和grid在各种环境下都能正常显示。 - **事件处理**:利用EXT4.3丰富的事件系统,如`beforeedit`、`itemdblclick`等,实现...
这个压缩包"ext2.0.rar"包含了EXT Grid 2.0的所有资源和文件,帮助开发者实现描述中提到的各种高级特性。 1. **本地与远程排序**: 在EXT Grid 2.0中,用户可以对显示的数据进行本地排序,这意味着排序操作在客户端...
在软件开发中,特别是在构建用户界面时,ExtJS是一个常用且强大的JavaScript库,它提供了丰富的组件,例如Ext.grid,用于创建交互式的表格视图。在处理Ext.grid时,理解其属性、方法和事件是至关重要的。以下是对...
- 在使用`Ext.EventManager.onWindowResize`方法时,确保为每一个Grid组件绑定窗口大小变化事件,如果页面中有多个Grid组件需要自适应。 - 在进行Grid的配置时,应确保相关的尺寸设置不会阻止Grid的自适应行为,如...
这种灵活性使得ExtJS Grid成为一个强大且可扩展的数据展示工具,可以根据不同的数据结构自适应地调整显示方式。通过实践这个实例,开发者可以更好地掌握ExtJS在数据驱动的应用场景下的使用技巧。
4. **EXT JS Grid**:Grid组件是EXT JS的核心组件之一,用于展示大量数据。它支持分页、排序、过滤和编辑功能,可以实现高度自定义的列显示和操作。 5. **EXT JS Tree**:Tree组件提供了树形结构的数据展示,适用于...
var grid = new Ext.grid.GridPanel({ autoHeight: true, store: store, sm: sm, cm: cm, id: 'grid', viewConfig: { forceFit: true }, bbar: new Ext.PagingToolbar({ pageSize: 5, store: store, ...
例如,"explorer"这个文件可能是EXT文件浏览器的示例,它可能展示了如何使用EXT的数据模型、视图和控制器来实现文件系统的浏览、选择和操作功能。 EXT的核心特性包括数据绑定,这意味着组件的状态可以自动与后台...
9.4.13 自适应布局:ext.layout.container.abstractfit与ext.layout.container.fit / 456 9.4.14 卡片布局:ext.layout.container.abstractcard与ext.layout.container.card / 456 9.5 标签面板 / 458 9.5.1 ...
该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。
1. Grid Panel:Ext 3.0中的Grid Panel是一个强大的表格组件,支持数据分页、排序、过滤和编辑等功能。 2. Form Panel:用于创建复杂的表单,支持各种表单元素,如文本框、下拉框、复选框等,并有强大的验证机制。 3...
6. **树形组件和网格**:EXT的`Ext.tree`和`Ext.grid`组件提供了展示和操作树状数据和表格数据的能力。源码中包含了分页、排序、过滤等功能的实现,对于构建数据驱动的应用程序非常有帮助。 7. **工具栏和菜单**:...
Ext JS 6是一款功能强大且易用的前端框架,它通过提供一系列先进的特性帮助开发者高效地构建高质量的Web应用。无论是对于初学者还是有经验的开发者来说,学习Ext JS 6都是一项值得投入的时间和精力的投资。希望本篇...
EXTDRID(可能是EXTGRID的拼写错误)是指EXTJS中的Grid Panel,它允许开发者构建灵活、可配置的数据视图,适用于大量结构化数据的展示。在EXTJS中,动态GRID指的是可以实时调整列宽、列数甚至列结构的网格视图,以...
EXT图书管理系统是一款基于EXT JavaScript库开发的Web应用程序,主要用于实现高效、用户友好的图书管理功能。EXT是一个强大的前端开发框架,提供了丰富的UI组件和数据绑定机制,使得开发者能够构建出功能强大、界面...
GXT,全称为Ext GWT(Google Web Toolkit),是一个强大的Java库,用于构建复杂的、高性能的Web应用程序。它提供了丰富的用户界面组件,如表格、表单、树形视图等,与GWT的强类型系统和编译时检查相结合,使得开发...
在这个"Ext项目实例 js servlet"中,我们将探讨如何将ExtJS与Java Servlet结合,实现前后端的数据交互。 首先,ExtJS的主要组成部分包括: 1. **组件(Components)**:ExtJS 提供了各种各样的组件,如表格、表单...
4. **强大的表格功能**:EXT的Grid组件功能强大,支持分页、排序、过滤、拖放等功能,能处理大量数据。 5. **AJAX支持**:EXT内置了对AJAX的封装,简化了异步数据交互,可轻松实现前后端通信。 6. **主题定制**:EXT...