Results 1 to 5 of 5

Thread: IE layout breaks

  1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    11
    Answers
    1

    Default IE layout breaks

    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.
    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,
    Code:
    buildItems: function() {
    		var projectStore = Ext.getStore('projectCombo');
    		return [
    		  this.buildProjectCombo(projectStore)
    		];
    	},

    This file has following layout.
    Code:
    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.
    Code:
    displayProjectTemplate: function() {
    		this.insert(1, {
    			xtype: 'xtypeAbcTemplate'
    		});
    	},
    and Source.js also has the same layout.
    Code:
    defaults: {
    		labelAlign: 'right',
    		labelWidth: '95',
    		anchor: '100%'
    	},

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    In which versions of ExtJS and IE are you seeing this issue?

  3. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    11
    Answers
    1

    Default

    I am using ExtJs version 4.1.3 and I am seeing this issue in IE 8 and 9 both.

    Thank you.

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    I haven't been able to recreate this. Any change you can post a Fiddle which exhibits the behavior?
    https://fiddle.sencha.com/#home

  5. #5
    Sencha User
    Join Date
    Apr 2013
    Posts
    11
    Answers
    1

    Default

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •