PDA

View Full Version : IE layout breaks



cac
4 Aug 2014, 7:37 AM
Hi,
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.buildProjectCombo(projectStore)
];
},



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:06 AM
In which versions of ExtJS and IE are you seeing this issue?

cac
4 Aug 2014, 11:16 AM
I am using ExtJs version 4.1.3 and I am seeing this issue in IE 8 and 9 both.

Thank you.

Gary Schlosberg
5 Aug 2014, 8:40 AM
I haven't been able to recreate this. Any change you can post a Fiddle which exhibits the behavior?
https://fiddle.sencha.com/#home

cac
5 Aug 2014, 12:20 PM
Thanks fore the reply Gary.
I have created a code similar to what I have(my extjs environment) - https://fiddle.sencha.com/#fiddle/8gb

However, I am not able to show the comobbox there. You are free to make changes to the code so that you can see the combobox. I am not expert with jsfiddle.
I hope this code will give you the whole idea of what I am doing.

Please let me know what you think. Thanks again.