不知是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());
};
分享到:
相关推荐
这个问题主要是由于GridPanel的宽度不足以容纳所有的列宽,因此浏览器会自动显示横向滚动条以便用户查看全部数据。本文将详细介绍如何解决这个在Extjs GridPanel中出现横向滚动条的问题。 首先,我们需要理解Extjs ...
为了确保每次加载数据时滚动条都能正确地回到原来的位置,我们还可以通过覆盖`Ext.grid.GridView`中的方法来进一步增强功能: ```javascript Ext.override(Ext.grid.GridView, { scrollTop: function () { this....
在本节中,我们将深入探讨一个常见的前端开发问题,即如何在GridPanel中为每条数据添加多个操作按钮。GridPanel通常用于展示表格数据,并允许用户进行交互操作,如编辑、删除或执行其他业务逻辑。在Web应用中,特别...
如果希望某些列始终保持在左侧不随滚动条移动,可以在`<ext:Column>`中添加`Locked`属性: ```html <ext:Column DataIndex="Id" Header="ID" Width="50" Locked="true" /> ... ``` 总结,EXT.NET GridView ...
5. **文字滚动**:`文字滚动.doc`可能讲述了如何在ExtJS中实现文字或元素的滚动效果,这对于创建动态通知或者滚动条等效果很有用。 6. **新建Ext**:`新建Ext .doc`可能是一份新手入门指南,指导如何初始化一个新的...
1. **EXT分页组件**:EXT.js提供了GridPanel组件,用于展示数据,其中包含了内置的分页工具条。分页工具条通常位于表格下方,提供“上一页”、“下一页”、页码选择和“每页显示数量”等功能,便于用户控制数据的...
pageSize: 20, // 每页显示20条记录 autoLoad: true }); ``` 2. 创建一个PagingToolbar,用于展示分页控件: ```javascript var pagingToolbar = new Ext.PagingToolbar({ store: store, displayInfo: true...
**Ext.grid.GridPanel** - **描述**: 表格组件,用于显示和编辑数据。 - **用途**: 数据列表、报表等需要展示大量数据的场景。 **Ext.grid.EditorGridPanel** - **描述**: 可编辑的表格组件,允许用户直接在表格中...
- **Grid 视图**:掌握 Grid 视图的配置和使用方法,包括滚动条和拖拽等交互特性。 #### 二十一、GridPanel 分页 - **JSON-LIB**:介绍 JSON-LIB 的作用,它常用于处理 JSON 数据。 - **分页工具栏**:了解如何在 ...
`enableTabScroll`开启滚动条,`autoTabs`自动创建Tab,`deferredRender`控制渲染时机,`activeTab`设定初始选中项,`animScroll`启用动画滚动,`layoutOnTabChange`在切换Tab时重新布局,`bodyStyle`设置面板背景和...
1. **将列的width设为auto**:这种方法会使列宽自动伸展,但可能导致水平滚动条出现。 2. **修改CSS中的white-space属性**:将`.x-grid3-cell-inner`的`white-space`属性设置为`normal!important;`,可以使超出列宽...
var grid = new Ext.grid.GridPanel({ store: store, cm: cm, viewConfig: { forceFit: true // 自适应列宽 }, bbar: new Ext.PagingToolbar({ store: store, displayInfo: true, pageSize: 25 }) }); ```...
5. **GRID框架与库**:在实际开发中,常见的GRID解决方案有Ext JS的GridPanel、jQuery UI的DataTables、AngularJS的UI-Grid等。这些库提供了丰富的API和配置选项,简化了开发流程,同时也提供了诸如拖放排序、行编辑...
- **Panel**:基本的容器组件,可以容纳其他组件,具有标题、工具栏、滚动条等功能。 3. **项目开发**: - **MVC架构**:ExtJS 3.2.1引入了Model-View-Controller模式,有助于代码组织和分离关注点。 - **数据...