如何使 dhtmlx 布局响应？

Question

我的问题： 我使用 Bootstrap 和 DHTMLX 构建一个 web 应用程序，该应用程序有主页、侧边栏和其他不同的我使用 DHTMLX 构建布局和网格的页面，我使用其他 DHTMLX 组件。我设法让我的主页响应，其他 HTML 组件在不同的设备上也能完美显示，但我的问题是 DHTMLX 布局和网格从来没有响应过！我一直在寻找并试图找到一种使其响应的方法，因为我有很多页面，但每个页面都可以有 DHTMLX 的布局模式（最常用的是 1C、2U、3L、3T， 3U多级布局也用到了）

我想做什么：好吧，我注意到了一些事情，如果我设法根据使用的不同媒体动态更改 DHTMLX 布局，这可能是一个解决方案，示例：在其中一个页面上，我有一个 2U 布局，它在桌面屏幕上显示得很好，但它在智能 phone 设备上显示得非常糟糕 - 较窄的媒体 - 因此 2U 必须转换为 2E 这使得它至少更容易查看和使用

我的问题 - 或问题 -：我是否正在考虑使我的 Web 应用程序具有响应能力的最愚蠢的方法，或者我正在尝试做的事情是否与响应能力有关概念？

这不是讨论 - 我不希望我的问题被关闭 - 我只需要一个答案来指导我以正确的方式，但是我非常感谢答案讨论在正确的地方。

Answer 1

您应该能够将 onresize 处理程序与 onload 处理程序一起使用。您只需卸载布局并在每次 window 调整大小时重新创建它：

<script>
  var layout
  var currentPattern

  function setLayout() {
    var width = window.innerWidth

    if (width < 600) {
      var pattern = "2E"
    } else {
      var pattern = "2U"
    }

    if (pattern == currentPattern) {
      return
    } else {
      currentPattern = pattern
    }

    if (layout) {
      layout.unload()
    }

    layout = new dhtmlXLayoutObject({
      parent: "your-layout-id",
      pattern: pattern
    })
  }

  window.onresize = setLayout
</script>
<body onload="setLayout()">
  <div id="your-layout-id">...</div>
</body>

如何使 dhtmlx 布局响应？

How to make dhtmlx layout responsive?

javascript

dhtmlx

responsive-design

twitter-bootstrap-3