`
chenyuxiaoxiao
  • 浏览: 71313 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

解决Ext GridPanel 不能显示横滚动条

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());
};
分享到:
评论

相关推荐

    Extjs gridpanel 出现横向滚动条问题的解决方法

    这个问题主要是由于GridPanel的宽度不足以容纳所有的列宽,因此浏览器会自动显示横向滚动条以便用户查看全部数据。本文将详细介绍如何解决这个在Extjs GridPanel中出现横向滚动条的问题。 首先,我们需要理解Extjs ...

    Ext grid panel 滚动条位置不变

    为了确保每次加载数据时滚动条都能正确地回到原来的位置,我们还可以通过覆盖`Ext.grid.GridView`中的方法来进一步增强功能: ```javascript Ext.override(Ext.grid.GridView, { scrollTop: function () { this....

    GridPanel的小难点 第一节 每条数据后面跟随几个操作按钮

    在本节中,我们将深入探讨一个常见的前端开发问题,即如何在GridPanel中为每条数据添加多个操作按钮。GridPanel通常用于展示表格数据,并允许用户进行交互操作,如编辑、删除或执行其他业务逻辑。在Web应用中,特别...

    ext.net GridView 实例详解

    如果希望某些列始终保持在左侧不随滚动条移动,可以在`&lt;ext:Column&gt;`中添加`Locked`属性: ```html &lt;ext:Column DataIndex="Id" Header="ID" Width="50" Locked="true" /&gt; ... ``` 总结,EXT.NET GridView ...

    Ext 资料snow

    5. **文字滚动**:`文字滚动.doc`可能讲述了如何在ExtJS中实现文字或元素的滚动效果,这对于创建动态通知或者滚动条等效果很有用。 6. **新建Ext**:`新建Ext .doc`可能是一份新手入门指南,指导如何初始化一个新的...

    EXT分页视频

    1. **EXT分页组件**:EXT.js提供了GridPanel组件,用于展示数据,其中包含了内置的分页工具条。分页工具条通常位于表格下方,提供“上一页”、“下一页”、页码选择和“每页显示数量”等功能,便于用户控制数据的...

    EXT2.0分页

    pageSize: 20, // 每页显示20条记录 autoLoad: true }); ``` 2. 创建一个PagingToolbar,用于展示分页控件: ```javascript var pagingToolbar = new Ext.PagingToolbar({ store: store, displayInfo: true...

    extjs控件列表

    **Ext.grid.GridPanel** - **描述**: 表格组件,用于显示和编辑数据。 - **用途**: 数据列表、报表等需要展示大量数据的场景。 **Ext.grid.EditorGridPanel** - **描述**: 可编辑的表格组件,允许用户直接在表格中...

    Extjs学习带注释

    - **Grid 视图**:掌握 Grid 视图的配置和使用方法,包括滚动条和拖拽等交互特性。 #### 二十一、GridPanel 分页 - **JSON-LIB**:介绍 JSON-LIB 的作用,它常用于处理 JSON 数据。 - **分页工具栏**:了解如何在 ...

    ExtJs使用过程中积攒的一些东西

    `enableTabScroll`开启滚动条,`autoTabs`自动创建Tab,`deferredRender`控制渲染时机,`activeTab`设定初始选中项,`animScroll`启用动画滚动,`layoutOnTabChange`在切换Tab时重新布局,`bodyStyle`设置面板背景和...

    ExtJs高级技巧

    1. **将列的width设为auto**:这种方法会使列宽自动伸展,但可能导致水平滚动条出现。 2. **修改CSS中的white-space属性**:将`.x-grid3-cell-inner`的`white-space`属性设置为`normal!important;`,可以使超出列宽...

    Extjs2.0动态加载gird的例子

    var grid = new Ext.grid.GridPanel({ store: store, cm: cm, viewConfig: { forceFit: true // 自适应列宽 }, bbar: new Ext.PagingToolbar({ store: store, displayInfo: true, pageSize: 25 }) }); ```...

    整理过的GRID综合应用

    5. **GRID框架与库**:在实际开发中,常见的GRID解决方案有Ext JS的GridPanel、jQuery UI的DataTables、AngularJS的UI-Grid等。这些库提供了丰富的API和配置选项,简化了开发流程,同时也提供了诸如拖放排序、行编辑...

    extjs 3.2.1 项目

    - **Panel**:基本的容器组件,可以容纳其他组件,具有标题、工具栏、滚动条等功能。 3. **项目开发**: - **MVC架构**:ExtJS 3.2.1引入了Model-View-Controller模式,有助于代码组织和分离关注点。 - **数据...

Global site tag (gtag.js) - Google Analytics