ExtJS 5.0 - 在覆盖中移动组件

Question

我们有来自第三方的代码，我们不允许直接修改，只能使用覆盖。

在其中一种形式上，通过更改某些组件的顺序可以更好地为客户服务。我可以在 DOM 内完成此操作，但这种方法非常脆弱，可能会导致框架出现问题。我在 Ext.container.Container 中查看了 moveBefore 和 moveAfter，但坦率地说，它们不起作用。

我正在寻找 1) 覆盖的最佳位置，例如视图的 constructor，或者视图的 initComponent，或者视图控制器的覆盖，等等 2) 如果有任何 reliable ExtJS 方法来移动组件.

例如initComponent 在 XYView.js

中覆盖

initComponent: function () {
    this.callParent([]);
    // Get the components, X and Y, error checking omitted
    var X = this.query('*[itemId=X]')[0];
    var Y = this.query('*[itemId=Y]')[0];
    // Move X before Y
    // This doesn't work properly -- the layout is messed up!
    this.insertBefore(X, Y);
}

重申一下，我更愿意在 ExtJS 中执行此操作，并尽可能避免 DOM 操作。

Answer 1

您可以从容器中取出组件并重新插入。语法是

.remove( component, autoDestroy ) : Ext.Component

其中 autoDestroy === false 使组件保持活动状态。然后使用

.insert( index, component ) : Ext.Component

如果您在 initComponent 中这样做，您可能做错了，因为您仍然可以访问配置对象并且应该直接操作它们。

出于性能原因暂停多个插入的布局：.suspendLayouts()（全局或每个容器）。

使用文档，它们非常好：https://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.container.Container

PS：网格行通过商店、css 和自定义渲染器进行操作，不要直接触摸 dom。

更新您将通过在构造函数中操作配置来获得最佳性能，因为框架需要做的工作更少。 initComponent实际上是在组件构造函数中调用的，所以几乎是一样的。

在构造函数中，您将获得如下配置：

constructor: function(config) {
//...
}

在 initComponent 中，配置已经是对象的一部分。通过 callParent 调用父项时请注意顺序。通过迭代项目-属性找到您的子项目，例如通过 Ext.Array.findBy 并查找 itemId。使用 javascript 本机方法移动项目，例如 Array.splice().

如果性能不重要，请在稍后阶段移动您的组件，例如在 afterrender 事件中。在这里您可以使用 extjs 方法来查找和移动组件，例如down() remove() insert().

Answer 2

您需要选择正确的父级才能调用 moveBefore。我通过查找 X 和 Y 的父级修改了您的代码，使用 parentX 删除 X，然后使用 parentY 将 X 移动到 Y 旁边：

initComponent: function () {
    this.callParent([]);
    // Get the components, X and Y, error checking omitted
    var X = this.query('*[itemId=X]')[0];
    var Y = this.query('*[itemId=Y]')[0];
    // Move X before Y
    // Revised code follows
    // Get direct parents
    var parentOfX = X.findParentBy(function (container, me) {return !(container == me);});
    var parentOfY = Y.findParentBy(function (container, me) {return !(container == me);});
    // Remove first to be safe, don't autodestroy
    X = parentOfX.remove(X, false);
    // Reposition under the correct parent
    parentOfY.moveBefore(X, Y);
}

我已经作为 initComponent 覆盖进行了测试，它似乎工作正常。

ExtJS 5.0 - 在覆盖中移动组件

ExtJS 5.0 - moving components in overrides

javascript

extjs

extjs5