ExtJS 5.0 - движущиеся компоненты в переопределениях

Question

У нас есть код от третьего лица, которому мы не можем изменять напрямую, может использовать только переопределения.

На одной из форм клиент будет лучше обслуживаться путем изменения порядка некоторых компонентов. Я могу сделать это в DOM, но этот подход довольно хрупкий и может вызвать проблемы в рамках. Я просмотрел moveBefore и moveAfter в Ext.container.Container, но, откровенно говоря, они не работают.

Я ищу 1) лучшее место для переопределения, например. вид constructor или вид initComponent, или, может быть, переопределения контроллера просмотра и т. д., и 2) если есть надежные методы ExtJS для перемещения компонентов вокруг.

E.g. 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

Вам нужно выбрать правильного родителя для звонка moveBefore.Я пересмотрел свой код, находя родитель X и Y, с помощью parentX удалить X, то родительский двигаться 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 переопределения и это похоже на работу Хорошо.

Answer 2

Вы можете удалить компоненты из контейнеров и вставить их снова. Синтаксис:

.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 и пользовательские рендеры, не прикасайтесь к РОМУ непосредственно.

UPDATE вы получите лучшую производительность, манипулируя ваши конфиги в конструкторе, поскольку есть меньше работы, чтобы сделать для рамок. initComponent фактически вызывается в конструкторе компонентов, поэтому он почти такой же.

В конструкторе вы получите конфиги, как это:

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

В InitComponent конфиги уже являются частью объекта. Просто остерегайтесь порядка при вызове родителя через callParent. Найдите дочерние элементы, итерации элементов-свойств, например. через Ext.Array.findBy и ищите itemId. Перемещение элементов с использованием встроенных методов javascript, таких как Array.splice().

Если производительность не имеет значения, перемещайте компоненты на более позднем этапе, например. в событии afterrender. Здесь вы можете использовать методы extjs для поиска и перемещения компонентов, например. down()remove()insert().