View Full Version : Layout breaks in IE when matchFieldWidth:false and when vertical scrollbar is shown

4 Aug 2014, 7:49 AM
I have combobox who's width adjusts bases on it's contents. I have used matchFieldWidth: false property to achieve that. This works well in firefox, chrome and actually in IE too. However, when number of items in combbox increases, and vertical scrollbar is shown, comobox list/picker acquire whole screen in IE ( only). This works well in forefox and chrome. If vertical scroolbar is shown in these browsers, it adjusts the width and makes the space for scrollbar. It does NOT take whole screen in these browsers.
I tried changing the layout but nothing is working in IE.
It is definitely a layout issue but I am just not able to figure it out.

Below is the code.

buildProjectCombo: function(store, disabled) {
var enabled = (disabled !== null && disabled) ? false : true;
var combo = Ext.create('Ext.form.field.ComboBox', {
itemId: EC.constant.ItemIds.FIELD_PROJECT,
fieldLabel: 'test',
labelAlign: 'right',
store: store,
valueField: 'value',
displayField: 'label',
emptyText: 'loading',
disabled: !enabled,
editable: false,
typeAhead: 'true',
typeAheadDelay: 0,
minChars: 0,
matchFieldWidth: false,
listConfig: {
resizable: true,
minWidth: 230
store.combo = combo;
return combo;

buildProjectCombo method is called from another file AbcTemplate.js like this,

buildItems: function() {
var projectStore = Ext.getStore('projectCombo');
return [

This file has following layout.

alias: 'widget.xtypeAbcTemplate',
defaults: {
labelAlign: 'right',
labelWidth: '95',
anchor: '100%'

AbcTemplate.js is called from another file Source.js like this. It is dynamically called/inserted based on logic in Source.js like this.

displayProjectTemplate: function() {
this.insert(1, {
xtype: 'xtypeAbcTemplate'

and Source.js also has the same layout.

defaults: {
labelAlign: 'right',
labelWidth: '95',
anchor: '100%'

Gary Schlosberg
4 Aug 2014, 11:04 AM