`
yxgyh
  • 浏览: 275576 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

实现Ext Grid宽高自适应

    博客分类:
  • Ext
EXT 
阅读更多

不知是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 Grid表格的自动宽度及高度的实现”这一主题时,我们深入解析如何在Ext JS框架下,利用其强大的Grid组件自适应容器尺寸,实现表格宽度与高度的自动调整。这一技术对于构建响应式、用户友好的界面至关重要...

    EXT4.3实现动态表单全动态

    - **响应式设计**:EXT4.3支持响应式布局,可以自适应不同设备和屏幕尺寸,确保动态表单和grid在各种环境下都能正常显示。 - **事件处理**:利用EXT4.3丰富的事件系统,如`beforeedit`、`itemdblclick`等,实现...

    ext2.0.rar

    这个压缩包"ext2.0.rar"包含了EXT Grid 2.0的所有资源和文件,帮助开发者实现描述中提到的各种高级特性。 1. **本地与远程排序**: 在EXT Grid 2.0中,用户可以对显示的数据进行本地排序,这意味着排序操作在客户端...

    extgrid属性[文].pdf

    在软件开发中,特别是在构建用户界面时,ExtJS是一个常用且强大的JavaScript库,它提供了丰富的组件,例如Ext.grid,用于创建交互式的表格视图。在处理Ext.grid时,理解其属性、方法和事件是至关重要的。以下是对...

    解决extjs grid 不随窗口大小自适应的改变问题

    - 在使用`Ext.EventManager.onWindowResize`方法时,确保为每一个Grid组件绑定窗口大小变化事件,如果页面中有多个Grid组件需要自适应。 - 在进行Grid的配置时,应确保相关的尺寸设置不会阻止Grid的自适应行为,如...

    Ext 根据数据库返回json动态生成grid列表实例

    这种灵活性使得ExtJS Grid成为一个强大且可扩展的数据展示工具,可以根据不同的数据结构自适应地调整显示方式。通过实践这个实例,开发者可以更好地掌握ExtJS在数据驱动的应用场景下的使用技巧。

    EXT_JS实例,官方实例

    4. **EXT JS Grid**:Grid组件是EXT JS的核心组件之一,用于展示大量数据。它支持分页、排序、过滤和编辑功能,可以实现高度自定义的列显示和操作。 5. **EXT JS Tree**:Tree组件提供了树形结构的数据展示,适用于...

    ext表格布局小例子

    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, ...

    ext 实例集

    例如,"explorer"这个文件可能是EXT文件浏览器的示例,它可能展示了如何使用EXT的数据模型、视图和控制器来实现文件系统的浏览、选择和操作功能。 EXT的核心特性包括数据绑定,这意味着组件的状态可以自动与后台...

    Ext Js权威指南(.zip.001

    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多层表头分组小计导出excel与Java后台交互全代码

    该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。

    Ext 3.0中文手册及帮助文档

    1. Grid Panel:Ext 3.0中的Grid Panel是一个强大的表格组件,支持数据分页、排序、过滤和编辑等功能。 2. Form Panel:用于创建复杂的表单,支持各种表单元素,如文本框、下拉框、复选框等,并有强大的验证机制。 3...

    ext 3.2源码

    6. **树形组件和网格**:EXT的`Ext.tree`和`Ext.grid`组件提供了展示和操作树状数据和表格数据的能力。源码中包含了分页、排序、过滤等功能的实现,对于构建数据驱动的应用程序非常有帮助。 7. **工具栏和菜单**:...

    ext 学习资料

    Ext JS 6是一款功能强大且易用的前端框架,它通过提供一系列先进的特性帮助开发者高效地构建高质量的Web应用。无论是对于初学者还是有经验的开发者来说,学习Ext JS 6都是一项值得投入的时间和精力的投资。希望本篇...

    Extjs动态GRID

    EXTDRID(可能是EXTGRID的拼写错误)是指EXTJS中的Grid Panel,它允许开发者构建灵活、可配置的数据视图,适用于大量结构化数据的展示。在EXTJS中,动态GRID指的是可以实时调整列宽、列数甚至列结构的网格视图,以...

    ext 图书管理系统

    EXT图书管理系统是一款基于EXT JavaScript库开发的Web应用程序,主要用于实现高效、用户友好的图书管理功能。EXT是一个强大的前端开发框架,提供了丰富的UI组件和数据绑定机制,使得开发者能够构建出功能强大、界面...

    GXT组件使用教程2——Auto Height Grid

    GXT,全称为Ext GWT(Google Web Toolkit),是一个强大的Java库,用于构建复杂的、高性能的Web应用程序。它提供了丰富的用户界面组件,如表格、表单、树形视图等,与GWT的强类型系统和编译时检查相结合,使得开发...

    Ext项目实例 js sevlet

    在这个"Ext项目实例 js servlet"中,我们将探讨如何将ExtJS与Java Servlet结合,实现前后端的数据交互。 首先,ExtJS的主要组成部分包括: 1. **组件(Components)**:ExtJS 提供了各种各样的组件,如表格、表单...

    EXT中文手册(PDF)

    4. **强大的表格功能**:EXT的Grid组件功能强大,支持分页、排序、过滤、拖放等功能,能处理大量数据。 5. **AJAX支持**:EXT内置了对AJAX的封装,简化了异步数据交互,可轻松实现前后端通信。 6. **主题定制**:EXT...

Global site tag (gtag.js) - Google Analytics