解决DHTMLX6窗口重叠异常的问题

Posted on Last updated on

年少无知的我第一次看到酷炫的DHTMLX框架，便决定用DHTMLX写一发前端（第一次写前端），最后Chrome调试工具熟练度显著增加（？）

问题

只要用上了DHTMLX的Window组件，不管是跟DHX Suite的其他组件组合，还是跟DHX家的其他库组合，都能出现各种各样的问题，其中最为常见的问题就是本来应该浮于组件上方的组件反而衬于组件的下方。

解决方案

先介绍几个神奇的API

1
2
dhxWindow._handlers.setActive(); // 激活Window窗口
form.getItem("component-id")._popup._popup.classList.add("dhx_popup--window_active"); // 激活组件窗口

我遇到的第一种问题，新建的窗口未被正确激活，显示在旧窗口下方，这个时候可以这么写

1
2
3
4
setTimeout(() => {
  dhxWindow.show();
  dhxWindow._handlers.setActive();
}, 100);

这里延迟100ms启动是因为，这个bug偶尔会出现在点击按钮创建窗口的时候，等待100ms其实是等待用户释放鼠标。

我遇到的第二种问题是，Window套Form套Datepicker，在同时有多个Window的情况下，Datepicker的日历出现在Window下方（能100%复现的bug），这个时候只要"激活"Datepicker的日历就好了。比如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var form = new dhx.Form(null, {
    css: "dhx_widget--no-bordered",
    rows: [
        {
            id: "iamid",
            type: "datepicker",
            name: "date",
            gravity: true,
            value: "2020-05-01",
            dateFormat: "%Y-%m-%d",
            label: "开行日期",
            labelInline: true,
        },
    ]
});

form.getItem("iamid")._popup._popup.classList.add("dhx_popup--window_active");

这样就可以让日历正确显示了。

分析

DHTMLX框架是也是通过CSS的z-index来确定窗口的层次的，上面涉及到的两个神奇API干的都是同一件事情，添加内置z-index的style (dhx_popup--window_active)到组件上，实现激活窗口的效果。但是DHX那群nt工程师压根就没给datepicker之类的组件写自动添加dhx_popup--window_active的代码，至于Window组件，自动添加的代码有是有，就是有bug。

牢骚

DHX的库bug多也就算了，官网上放着的文档也是有一堆bug的假文档，作为一个历史悠久，功能酷炫，但没人用的库，是不是该考虑为什么过了那么多年自己还是那么冷门啊。