如何解决grid加载时loadMask仅覆盖部分区域、可滚动的问题

解决方案 #

方案1：store加载时禁用grid滚动（实现最简单，侵入性最低） #

默认grid的滚动逻辑由scrollable实例控制，只需要在store加载前后切换滚动禁用状态即可：

// 监听store相关事件
store.on('beforeload', () => {
  grid.getScrollable().setDisabled(true);
});
store.on('load', () => {
  grid.getScrollable().setDisabled(false);
});
store.on('exception', () => {
  // 加载失败也要恢复滚动，避免页面卡死
  grid.getScrollable().setDisabled(false);
});

同时保留默认loadMask配置即可，禁用滚动后用户无法滚动，自然不会出现mask不覆盖的问题。

方案2：loadMask覆盖整个grid滚动区域 #

默认loadMask是绑定在grid的view元素上，仅覆盖初始可视区域，替换为直接给grid组件全局加mask即可：

1. 先关闭grid默认的loadMask配置：loadMask: false
2. 自行监听store事件手动加全局mask：

store.on('beforeload', () => {
  grid.mask('数据加载中...');
});
store.on('load', () => {
  grid.unmask();
});
store.on('exception', () => {
  grid.unmask();
});

此时mask会覆盖整个grid组件的所有区域，包括滚动超出首屏的内容。

方案3：loadMask固定在可视区域 #

通过修改mask的定位规则实现滚动时始终居中显示：

1. 关闭默认loadMask，自定义带专属类名的mask：

store.on('beforeload', () => {
  grid.mask('数据加载中...');
  // 给mask元素添加自定义类
  grid.getEl().down('.x-mask').addCls('fixed-mask');
});
store.on(['load', 'exception'], () => {
  grid.unmask();
});

2. 增加对应CSS样式：

.fixed-mask {
  position: fixed !important;
  /* 调整偏移适配grid可视区域位置 */
  top: inherit;
  left: inherit;
  width: inherit !important;
  height: inherit !important;
}

mask会固定在grid初始可视区域位置，滚动grid时不会跟随内容移动。

内容的提问来源于stack exchange，提问作者Mitchel