Swapping two components in extjs - extjs

Question

I have two components in my form which are "Source" and "Destination". And I want to give an option to change the order of those 2 components when clicked on "Swap" button.
Is this achievable in Extjs form ..?
https://fiddle.sencha.com/#view/editor&fiddle/3ej6

Answer 1

I attach here one possible solution: I removed both the fields and added them again with right indices.
listeners: {
click: function(){
const panel = this.up('panel');
const sourceForm = panel.query('combo[reference=source]');
const destinationForm = panel.query('combo[reference=destination]');
panel.remove(sourceForm)
panel.remove(destinationForm)
panel.insert(0, destinationForm)
panel.insert(1, sourceForm)
}
}
Here the link to working Fiddle.
---- EDIT -----
This is the new snippet to adapt the fiddle to your comment:
const panel = this.up('panel');
const sourceForm = panel.query('combo[reference=source]');
const destinationForm = panel.query('combo[reference=destination]');
const sourceIndex = panel.items.items.indexOf(sourceForm[0])
panel.remove(sourceForm)
panel.remove(destinationForm)
panel.insert(sourceIndex, destinationForm)
panel.insert(sourceIndex === 0 ? 1 : 0, sourceForm)
The working fiddle can be found at the same old link.

Answer 2

Different approach can be found here:
https://fiddle.sencha.com/#view/editor&fiddle/3em7
let combo1 = Ext.create({
xtype: 'combo',
name: 'source',
fieldLabel: 'source',
reference: 'source',
displayField: 'name',
valueField: 'abbr',
store: [{
abbr: 'AL',
name: 'Alabama'
}, {
abbr: 'AK',
name: 'Alaska'
}, {
abbr: 'AZ',
name: 'Arizona'
}, {
xtype: 'button',
}],
allowBlank: false // requires a non-empty value
})
let combo2 = Ext.create({
xtype: 'combo',
name: 'source1',
fieldLabel: 'dest',
reference: 'source1',
displayField: 'name',
valueField: 'abbr',
//hidden: true,
store: [{
abbr: 'AL',
name: 'Alabama'
}, {
abbr: 'AK',
name: 'Alaska'
}, {
abbr: 'AZ',
name: 'Arizona'
}, {
xtype: 'button',
}],
allowBlank: false // requires a non-empty value
})
let items = [combo1, combo2];
let wrapper = Ext.create({
xtype: 'container',
layout: 'vbox',
items: items
})
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [wrapper, {
xtype: 'button',
text: "Swap",
handler:(b)=> {
wrapper.removeAll(false);
wrapper.add(items.reverse());
}
}]
});
Technically, as far as i remember, items within a (container) component are managed using a mixed collection.
https://docs.sencha.com/extjs/6.5.3/classic/Ext.util.MixedCollection.html
You can try to change the order there and refresh the view.

Answer 3

I guess we missed the CSS only solution.
You can use ordinal-group to swap items. Just add a class, which adds a higher group number to the first combobox.
listeners: {
click: function () {
let view = this.up(),
sourceComp = view.down('combo[reference=source]');
sourceComp.toggleCls('box-reverse')
}
}
.box-reverse {
-webkit-box-ordinal-group: 3!important;
}
Here is your fiddle