PDA

View Full Version : Ext container layout breaking the multiselect combo box component while selecting an



tsensuous.grace
1 May 2018, 8:22 AM
I have a layout that I need to put side by side. The layout comprise of :
1- Combobox
2- multiselect combo
3-Textfield

Now I'm using the layout property of the container and setting it to vbox for the main cont and hbox for the inside container. Now for some reason my multisselect combo box is breaking when I try to select multiple options here.


attached is the gif for it.


[![enter image description here][1]][1]


below is the code:





var $cls = NS.AAA = function(cfg) {
$cls.superclass.constructor.call(this, Ext.apply({
height: 45,
layout: {
type: 'vbox',
align: 'stretch',
pack: 'center'
}
//end of xtype container

}, cfg));
};
addFilter: function(token, filter, op) {
var filterItem = Ext.create({
xtype: 'container',
height: 30,
cls: 'purge-filter-item',
layout: {
type: 'hbox',
align: 'middle'
},
items: [
this.typeCombo = new Ext.form.ComboBox({
emptyText: $L('Select a filter...'),
store: this.menuStore = new Ext.data.ArrayStore({
fields: ['key', 'title'],
data: this.getFilterValues()
})
}),

new ux.form.datepicker.SuperDateField({
anchor: '0',
ref: "../date",
cls: "purge-date",
hideTrigger2: true,
includeFutureOptions: false,
simpleMode: true,
isDateRange: true,
hidden: true
}),

new Qx.form.MultiSelectComboBox({
allowCommaInQuery: true,
anchor: '-5',
displayField: 'value',
valueField: 'value',
hideRefreshLabel: true,
ref: "../multiComboRegions",
refreshable: false,
mode: 'local',
emptyText: $L('Select Regions'),
enableCopyPaste: false,
anyMatch: true,
caseSensitive: false,
value: ["name"],
cacheSizes: false,
hidden: true,
store: this.multiCombo = new Ext.data.ArrayStore({
fields: ['value'],
data: this.tokenValues,
expandData: true,

}),
}),// end of multiSelect

}]

}); // end of filteritem

}

},


Any idea why this could be happening and how to fix this?


[1]: https://i.stack.imgur.com/dlgKC.gif