Results 1 to 8 of 8

Thread: [4.0.7] Combo box issue in displaying value in view port layout

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-4306 in a recent build.
  1. #1

    Exclamation [4.0.7] Combo box issue in displaying value in view port layout

    REQUIRED INFORMATION




    Ext version tested:
    • Ext 4.0.7



    Browser versions tested against:
    • IE8



    DOCTYPE tested against:
    • NA



    Description:
    • Form in viewport layout having combo box giving trouble if we select the drop down value second time. Clicking on combo box first time renders value correctly but if we click second time on same combo, layout - alignment goes off and values are shown on top-right corner of the IE browser



    Steps to reproduce the problem:
    • Design View Port layout and have form on North or Center region with one combo box.Click on Combo box on North or Center region- Select any one value and click on combo dropdown button again. You can see drop down values goes off the layout..



    The result that was expected:
    • Combo values should be displayed when we click on drop down button consistently



    The result that occurs instead:
    • Selecting combo value second time makes combo layout off.



    Test Case:


    Code:
        Ext.Loader.setConfig({
    	enabled: true
    });
    
    
    Ext.Loader.setConfig({
        enabled: true
    });
    
    
    
    
    Ext.onReady(function(){
    
    
    	var states_north = Ext.create('Ext.data.Store', {
    	    fields: ['abbr', 'name'],
    	    data : [
    	        {"abbr":"AL", "name":"Alabama"},
    	        {"abbr":"AK", "name":"Alaska"},
    	        {"abbr":"AZ", "name":"Arizona"}
    	        //...
    	    ]
    	});
    	
    	var states_center = Ext.create('Ext.data.Store', {
    	    fields: ['abbr', 'name'],
    	    data : [
    	        {"abbr":"AL", "name":"Alabama"},
    	        {"abbr":"AK", "name":"Alaska"},
    	        {"abbr":"AZ", "name":"Arizona"}
    	        //...
    	    ]
    	});
    	
    	 Ext.create('Ext.container.Viewport', {
         	layout: 'fit',
             layout: {
                 type: 'border',
                 padding: 5
             },
             defaults: {
                 split: true
             },
             items: [{
    					xtype: 'panel',
    					region:'west',
    					html:'West Panel'
    					
    				  },				
    				{
    					xtype: 'form',
    					frame:true,
    				    border:false,
    				    defaults: {
    				        anchor: '100%',  
    				        labelAlign: 'right',
    				        labelWidth: 200
    				    },
    					region:'north',
    					items:[{
    					       xtype:'combo',
    					       fieldLabel: 'Choose State',
    					       store: states_north,
    					       queryMode: 'local',
    					       displayField: 'name',
    					       valueField: 'abbr'
    					       }
    					      ]
    						
    					
    				},
    				{
    					xtype: 'form',
    					frame:true,
    				    border:false,
    				    defaults: {
    				        anchor: '100%',  
    				        labelAlign: 'right',
    				        labelWidth: 200
    				    },
    					region:'center',
    					items:[{
    					       xtype:'combo',
    					       fieldLabel: 'Choose State',
    					       store: states_center,
    					       queryMode: 'local',
    					       displayField: 'name',
    					       valueField: 'abbr'
    					       }
    					      ]
    						
    					
    				}
             ]
         });
    
    
       
    	
    });





    HELPFUL INFORMATION




    Screenshot or Video:



    See this URL for live test case: http://




    Debugging already done:
    • none



    Possible fix:
    • ??



    Additional CSS used:
    • only default ext-all.css



    Operating System:
    • WinXP Pro

  2. #2

    Default

    FYI... this was working fine with 4.0.2a.

  3. #3
    Sencha User
    Join Date
    Apr 2008
    Posts
    1

    Default

    Same behavior in IE9

  4. #4
    Ext JS Premium Member
    Join Date
    Feb 2010
    Location
    Chicago, IL
    Posts
    6

    Default

    I'm seeing this issue also. Everything worked fine in 4.0.6 using IE8.

  5. #5

    Exclamation

    any temporary fixes for this ? any work around ?

  6. #6
    Sencha User
    Join Date
    Oct 2010
    Location
    St. Louis, Missouri
    Posts
    48

    Default

    confirm that...

    4.0.2a ok

    4.0.7 broken

    I've spent hours on this before I figured out 4.0.2a works.

  7. #7
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    31

    Default

    Try this override.

    Code:
    Ext.override(Ext.form.field.ComboBox, {
        setHiddenValue: function(values){
            var me = this, i;
            if (!me.hiddenDataEl) {
                return;
            }
            values = Ext.Array.from(values);
            var dom = me.hiddenDataEl.dom,
                childNodes = dom.childNodes,
                input = childNodes[0],
                valueCount = values.length,
                childrenCount = childNodes.length;
     
            if (!input && valueCount > 0) {
                me.hiddenDataEl.update(Ext.DomHelper.markup({tag:'input', type:'hidden', name:me.name + "-hidden"}));
                childrenCount = 1;
                input = dom.firstChild;
            }
            while (childrenCount > valueCount) {
                dom.removeChild(childNodes[0]);
                -- childrenCount;
            }
            while (childrenCount < valueCount) {
                dom.appendChild(input.cloneNode(true));
                ++ childrenCount;
            }   
            for (i = 0; i < valueCount; i++) {
                childNodes[i].value = values[i];
            }
        }
    });

  8. #8
    Sencha User
    Join Date
    Oct 2010
    Location
    St. Louis, Missouri
    Posts
    48

    Default

    I can confirm the above override has fixed the issue I was having with ie7.

Tags for this Thread

Posting Permissions

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