extjspanelextjs6-modern

Reorder sub panels


I want to reorder panels in an ExtJS 6.6 modern panel.

In an image archive, I want to have query form where I dynamically add query conditions. Each condition is a separate panel with the specific fields for that condition. They are added (like rows) in a vbox layout. The conditions may be ANDed and ORed, which means the condition order is important. In the form, I'd like to move the conditions up/down.

My approach to solve this is to remove the panel and then insert it at the new position.

I have a sample fiddle at https://fiddle.sencha.com/#view/editor&fiddle/2opr

The panel to be moved is removed but never inserted again.

When I've googled for this, many results comes up but they show solutions for older classic guis (calling the view's doLayout method), I'm using 6.6.0 modern where there is no doLayout method.


Solution

  • No need to remove the panel from the container, apparently removing destroys the panel.

    Just change from this:

    var item = this.removeAt(index);
    

    to this:

    var item = Ext.ComponentQuery.query('#' + itemId)[0];