ext grid 没有数据时不显示横向滚动条的解决办法

最新推荐文章于 2025-06-10 11:21:20 发布
原创 最新推荐文章于 2025-06-10 11:21:20 发布 · 537 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#EXT

本文详细介绍了如何在使用EXTGrid组件时遇到无数据情况不显示横向滚动条的问题，并提供了解决方案。通过设置面板的绝对宽度，确保组件正确显示而不会出现不必要的滚动条。

EXT Grid 没有数据时不显示横向滚动条的解决办法：

this.grid.getView().mainBody.dom.style.width = this.grid.getView().getTotalWidth();
this.grid.getView().mainBody.dom.style.height = '1px';
注意：this.grid为创建的grid。

原理很简单哈，Ext要表格滚动条是通过计算面板的绝对宽度来实现的，如果没有指定宽度，则就会出问题了。

[Ext.Net]GridPanel滚动条添加在底部
德仔
01-10 2970
重写JS方法： Ext.override(Ext.grid.GridView, { scrollToTop: function () { var dom = this.scroller.dom; dom.scrollTop = dom.scrollHeight - dom.offsetHeigh
Extjs GridPanel 合计功能 解决滚动条滚动问题和页面刷新滚动条回到初始位置问题。
Draco
05-23 6503
说明：客户要求Grid下方有合计功能，截图如下 实现代码如下： Ext.ns('Ext.ux.grid'); var debug = !false; Ext.ux.grid.GridSummary = function(config) { Ext.apply(this, config); }; Ext.extend(Ext.ux.grid.GridSummary, Ext.ut
Ext Grid宽高自适应
10-15 1870
 不知是Ext的Bug还是其他原因，当初始化grid并将宽度设为100%时，其宽度会变成10000px宽，高度100%则grid高度根据grid内容自适应，而不是根据其所在容器自适应，一直没有很好的办法，只能使用绝对宽高，但有时这是很不方便的。对此问题一直耿耿于怀，后来终于想出了一个办法，还真的可行，但就是感觉有点蹩脚。一般我们都通过render到指定id的层上来展现grid，虽然不能让grid宽
ext的GridPanel控制滚动条
jt042435的专栏
08-28 2779
由于grid内容太多出现了滚动条，但我想要某一条记录在屏幕上看到，下午试了好多方法都没实现，在我快放弃的时候看了下帮助文档，原来很简单，grid.getView().focusRow(indexRow);
extjs中滚动条属性_在EXTJS面板中禁用水平滚动条
weixin_39801165的博客
12-19 185
user19137427extjs球队,是否有人知道如何在面板中禁用水平滚动条.我使用的是EXTJS 3.4基本上我只希望垂直滚动条可见而不是水平.我尝试使用autoScroll = true作为面板属性,但如果我这样做,我可以看到水平和垂直滚动条.这是代码.Hello World WindowExt.onReady(function(){var tab2 = new Ext.FormPanel(...
Ext Portal如何消除横向滚动条
shappy1978的专栏
07-08 284
//shappy 解决横向滚动条的问题 portal.body.dom.style.overflowX='hidden' portal.body.dom.style.overflowY='auto' Ext的Portal在高度太大时,如果autoScroll=true(默认),就会出现滚动条,但是很狗血的是同样会出现横向滚动条,实际上Ext的grid,tabPanel等多种容器都会出...
Extjs gridpanel 出现横向滚动条问题的解决方法
12-09
// not rendered } var g = this.grid; var c = g.getGridEl(); var csize = c.getSize(true); var vw = csize.width; if (!g.hideHeaders && (vw < 20 || csize.height < 20)) { // display: // none? ...
extjs中滚动条属性_ExtJs控件属性配置详细
weixin_39974932的博客
12-19 773
序言：1.本文摘自网络，看控件命名像是4.0以前的版本，但控件属性配置仍然可以借鉴(不足之处，以后项目用到时再续完善)。Ext.form.TimeField:配置项：maxValue：列表中允许的最大时间maxText：当时间大于最大值时的错误提示信息minValue：列表中允许的最小时间minText：当时间小于最小值时的错误提示信息increment：两个相邻选项间的时间间隔，默认为15分钟f...
ExtJS GridPanel不会出现横向滚动条
夏凉风
10-24 1719
当列比较多的情况，GripPanel不会出现滚动条，而是挤在一起，这种情况下只需要对gridPanel 设置固定宽度和高度就行了 width:1200 height:500 经测试可以使用 本人版本Extjs3.2
js实现标题栏信息横向滚动
08-03
NULL 博文链接：https://gerrard-ok.iteye.com/blog/1990156
【转】ExtJS中的grid没有滚动条问题(grid作为form的一个item)
crazyxingjc的专栏
06-28 6255
两种解决方法： 1、grid有自己的scrollBar 思路：首先设置grid的width为grid.getColumnModel().getTotalWidth(false)，然后对包含grid的item设置{ columnWidth : .99, autoScroll : true, items : [grid] } ，同时还可以对grid的columnModel加个listener以动态
Extjs gridpanel横向滚动条的显示方法
lg312200538的专栏
03-22 997
用extjs时有时左边为树形菜单，右边为tabpanel时，gridpanel里的横向滚动条显示不出来。可以在gridpanel的属性中，加入以下代码可解决这个问题。 viewConfig : { layout : function() { if (!this.mainBody) { return; // not...
Extjs4.2 gridPanel、treePanel 页面刷新后 滚动条位置不变
loveLifeLoveCoding的博客
12-02 1113
方式一：直接使用focusRow( row, [delay] )，让某一行聚焦； 方式二： 在刷新之前，先获得当前滚动条的位置：var scrollTop = grid.getView().getEl().getScrollTop(); //排序之前，grid滚动条的scrollTop 在刷新之后，再将滚动条滚回最开始的位置：grid.getView().getEl().setScrollT...
vxe-table滚动条失效
最新发布
yanzhe6789的博客
06-10 365
摘要：开发过程中出现横向滚动条拖动但表格不动的问题，发现原因是所有列都设置了fixed="left"属性导致固定。复盘发现是复制老代码时连带复制了fixed属性未修改所致。当时因不了解fixed作用且未查到类似案例，浪费大量时间排查，甚至更换依赖版本。作者自嘲犯蠢的同时，也预料到类似情况可能普遍发生。本文记录该错误以提醒其他开发者注意。
Ext Grid 报表锁定列+多表头的设计与实现（一）
JustCoding_的专栏
01-15 5178
首先找到Ext源码包下lockingGridView.js（我会放到附件中） 这个插件的目的在于实现Grid的锁定列效果。使用起来也很简单，只需要建立一个LockingColumnModel。它继承了Ext中的ColumnModel，并且添加了几个方法用来判断该列是否被锁住、设置该列是否锁住、获取冻结列宽、获取冻结列个数、移除列方法 Ext.ux.grid.LockingColumnMod
在动态展开/折叠时，如何保持当前滚动条位置不变？
04-24
<think>好的，我现在需要解决用户在Delphi的UniDBGrid中实现动态展开和折叠功能时保持滚动条位置不变的问题。首先，我得回忆一下之前的对话内容。用户之前询问了如何实现分组折叠展开，而这次的问题是在展开或折叠时如何保持滚动位置。另外，用户提供了三个引用内容，虽然这些引用主要涉及UniDBGrid的其他功能，比如锁定行列、添加按钮列和设置可勾选列，但可能有些信息可以借鉴。 首先，我需要理解用户的具体需求。当用户展开或折叠某个分组行时，数据行的数量会变化，导致内容区域的高度改变，从而可能影响滚动条的位置。用户希望在这种情况下，滚动条的位置能够保持不变，避免用户需要重新滚动到之前的位置，提升用户体验。 接下来，我需要考虑UniDBGrid的滚动机制。UniDBGrid是基于Ext JS的组件，其滚动行为可能由客户端JavaScript控制。因此，解决方案可能需要在客户端捕获当前的滚动位置，执行展开或折叠操作后，再恢复该位置。 用户提到的引用[1]中提到了Options->dgRowSelect属性影响双击编辑，这可能提醒我在处理事件时需要注意某些属性的设置，避免冲突。引用[2]和[3]关于添加列和设置字段，可能与动态生成行有关，但暂时关联不大。 接下来，我需要考虑如何实现保持滚动位置。可能的步骤包括： 1. **在展开或折叠前捕获滚动位置**：使用JavaScript在客户端获取当前的滚动条位置，包括垂直和水平滚动的位置。 2. **执行展开或折叠操作**：通过AJAX请求到服务端处理数据状态的变更，并刷新网格数据。 3. **数据刷新后恢复滚动位置**：在客户端数据加载完成后，将之前捕获的滚动位置重新设置回去。 不过，UniDBGrid在刷新数据后可能会重置滚动位置，因此需要在数据加载完成后触发恢复滚动位置的代码。这可能需要用到UniDBGrid的客户端事件，比如`afterrender`或`load`事件。 可能的挑战包括： - **正确的事件顺序**：确保在数据加载完成后执行恢复滚动位置的代码，而不是在数据加载之前或之中。 - **异步处理**：AJAX请求是异步的，因此需要在请求返回并刷新数据后，才能恢复滚动位置。 - **组件兼容性**：不同的UniGUI版本可能有不同的客户端API，需要确认相关方法和事件是否可用。 另外，参考之前的回答中提到的客户端脚本控制，比如在`cellclick`事件中处理展开折叠，可能需要在该事件中先保存滚动位置，然后在数据刷新后恢复。或者，使用UniDBGrid的客户端事件，如`beforeload`和`load`，来分别保存和恢复位置。 还需要考虑性能问题，频繁的保存和恢复滚动位置是否会影响用户体验，尤其是在大数据量的情况下。 可能的实现步骤如下： 1. **在展开或折叠前保存滚动位置**：在客户端的点击事件处理函数中，获取当前的滚动位置，并将其存储到某个变量或通过AJAX传递给服务端暂存。 2. **执行数据刷新**：通过AJAX请求到服务端，更新展开状态，并重新加载数据。 3. **数据加载完成后恢复滚动位置**：在客户端的`load`事件或数据加载完成的回调函数中，读取之前保存的滚动位置，并设置回UniDBGrid。 具体到代码实现，可能需要修改之前的JavaScript代码，在触发展开或折叠时保存滚动位置，并在数据加载后恢复。例如： 在`cellclick`事件处理函数中，添加保存滚动位置的代码： ```javascript function cellclick(sender, td, cellIndex, record, tr, rowIndex, e) { var grid = sender; var scroller = grid.getView().getScrollable(); var scrollY = scroller.getPosition().y; // 保存垂直滚动位置 // 存储到全局变量或通过AJAX传给服务端 window.lastScrollPosition = scrollY; // 原有的展开折叠逻辑 // ... } ``` 然后，在数据加载完成后恢复滚动位置。可以利用UniDBGrid的`afterrender`事件或监听数据加载完成的事件： ```javascript // 在UniDBGrid的ClientEvents.ExtEvents中添加 load 事件 function viewready(sender, eOpts) { if (window.lastScrollPosition !== undefined) { var scroller = sender.getScrollable(); scroller.scrollTo(0, window.lastScrollPosition); window.lastScrollPosition = undefined; // 清除保存的位置 } } ``` 不过，需要确认UniDBGrid的客户端对象模型，例如如何获取滚动条实例，以及正确的事件名称。可能需要查阅Ext JS的文档，因为UniDBGrid基于Ext JS的Grid组件。 另外，考虑使用UniSession的JavaScript调用，在Delphi代码中触发恢复滚动位置的JavaScript函数。例如，在服务端处理完AJAX请求并刷新数据后，执行客户端脚本： ```delphi procedure TForm1.UniDBGrid1AjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); begin if EventName = '_TOGGLE_GROUP' then begin // ...原有的处理逻辑 UniSession.AddJS('restoreScrollPosition();'); end; end; ``` 然后在客户端定义`restoreScrollPosition`函数，读取保存的位置并设置滚动条。 需要注意的是，如果用户在滚动后触发了其他操作，可能导致保存的位置被覆盖，因此需要合理管理保存的位置变量的生命周期。 另外，测试发现当UniDBGrid的`dgRowSelect`属性为True时，某些方法可能失效（如引用[1]提到的），需要确保在这种情况下保存和恢复滚动位置的代码仍然有效，可能需要调整事件处理的顺序或方式。 最后，可能需要处理水平滚动的位置，但用户主要关心的可能是垂直滚动位置。如果需要同时处理水平滚动，方法类似，保存和恢复x轴的位置即可。 总结可能的解决方案步骤： 1. 在客户端点击分组行时，保存当前的滚动位置。 2. 执行展开或折叠操作，刷新数据。 3. 在数据刷新完成后，恢复之前保存的滚动位置。</think>在 Delphi 的 `UniDBGrid` 中实现动态展开/折叠功能时保持滚动条位置不变，需通过 **客户端滚动位置记录** 和 **数据加载后恢复** 的机制实现。以下是具体方案： --- ### 一、核心原理 1. **滚动位置捕获**：在用户点击展开/折叠按钮时，通过 JavaScript 记录当前滚动位置。 2. **异步状态保存**：将滚动位置暂存至浏览器 `sessionStorage` 或全局变量。 3. **数据刷新后恢复**：在 `UniDBGrid` 完成数据加载后，自动还原记录的滚动位置。 --- ### 二、实现步骤 #### 1. 客户端滚动位置记录 修改分组行的 `cellclick` 事件处理脚本，添加滚动位置捕获逻辑： ```javascript // UniDBGrid.ClientEvents.ExtEvents.cellclick function cellclick(sender, td, cellIndex, record, tr, rowIndex, e) { var grid = sender; var view = grid.getView(); // 捕获当前滚动位置（垂直方向） var scrollTop = view.getScrollY(); // 存储到 sessionStorage（支持页面刷新后保留） sessionStorage.setItem('uniGridScrollPos', scrollTop); // 原有展开/折叠逻辑 if (record.get('RowType') === 'Group') { ajaxRequest(grid, '_TOGGLE_GROUP', { GroupKey: record.get('GroupKey'), IsExpanded: !record.get('IsExpanded') }); } } ``` #### 2. 服务端响应请求后触发恢复 在 Delphi 服务端处理完数据刷新后，注入恢复滚动位置的 JavaScript 代码： ```delphi // 处理展开/折叠的 Ajax 事件 procedure TForm1.UniDBGrid1AjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); begin if EventName = '_TOGGLE_GROUP' then begin // 更新分组状态 ToggleGroupState(Params.Values['GroupKey'], StrToBool(Params.Values['IsExpanded'])); // 刷新数据 UniQuery1.Close; UniQuery1.Open; // 触发客户端恢复滚动位置 UniSession.AddJS('restoreUniGridScrollPosition();'); end; end; ``` #### 3. 客户端滚动位置恢复 在页面中定义全局 JavaScript 函数： ```javascript // 在 UniServerModule 或页面的 OnBeforeShow 事件中注入 function restoreUniGridScrollPosition() { var grid = UniDBGrid1; // 根据实际组件名称调整 var storedPos = sessionStorage.getItem('uniGridScrollPos'); if (storedPos && grid) { var view = grid.getView(); view.scrollTo(0, parseInt(storedPos), { animate: false }); sessionStorage.removeItem('uniGridScrollPos'); // 清除记录 } } ``` #### 4. 绑定数据加载完成事件 在 `UniDBGrid` 的 `ClientEvents.ExtEvents` 中添加 `viewready` 事件： ```javascript // UniDBGrid.ClientEvents.ExtEvents.viewready function viewready(sender, eOpts) { restoreUniGridScrollPosition(); // 每次渲染完成后自动恢复 } ``` --- ### 三、关键优化点 1. **双存储冗余**：同时使用 `sessionStorage` 和全局变量存储滚动位置，防止意外丢失。 ```javascript // 记录时 window.__uniGridScrollPosBackup = scrollTop; sessionStorage.setItem('uniGridScrollPos', scrollTop); // 恢复时优先使用 sessionStorage var storedPos = sessionStorage.getItem('uniGridScrollPos') || window.__uniGridScrollPosBackup; ``` 2. **动画抑制**：通过 `{ animate: false }` 参数禁用滚动动画，避免视觉闪烁。 3. **横向滚动同步**：如需保持水平滚动位置，同步记录 `view.getScrollX()` 并恢复。 --- ### 四、注意事项 1. **组件命名一致性**：确保 JavaScript 中引用的 `UniDBGrid` 组件名称（如 `UniDBGrid1`）与实际对象一致。 2. **虚拟滚动兼容性**：若启用 `Scrollable=true`（虚拟滚动），需改用 `bufferedRenderer.scrollTo()` 方法[^1]。 3. **多网格实例**：若页面存在多个 `UniDBGrid`，需为每个实例单独存储滚动位置（通过唯一标识符区分）。 --- ### 五、效果验证 1. **展开/折叠操作**：点击分组行时，页面内容区域高度变化，但滚动条位置保持不变。 2. **数据分页测试**：切换分页后滚动位置归零，但展开/折叠操作不影响其他页面的定位。 3. **浏览器刷新**：通过 `sessionStorage` 保留的位置在页面刷新后仍有效（需业务逻辑支持状态持久化）。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值