Results 1 to 9 of 9

Thread: [DEFER] Wrong ComboBox width after ComboBox.setReadOnly()

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member
    Join Date
    Aug 2007
    Location
    Pilsen, Czech Republic
    Posts
    41

    Default [DEFER] Wrong ComboBox width after ComboBox.setReadOnly()

    Ext version tested:
    • Ext 3.2.1


    Adapter used:
    • ext


    css used:
    • only default ext-all.css




    Browser versions tested against:
    • IE 7
    • FF 3.5.11
    • Safari 4


    Operating System:
    • Win Vista


    Description:
    • Ext.form.TriggerField.setReadOnly destroies width of hidden ComboBox if its width is not defined and should be calculated by layout, e.g. AnchorLayout


    Test Case:

    Code:
    /*!
     * Ext JS Library 3.2.1
     * Copyright(c) 2006-2010 Ext JS, Inc.
     * [email protected]
     * http://www.extjs.com/license
     */
    Ext.onReady(function(){
        // simple array store
        var store = new Ext.data.ArrayStore({
            fields: ['abbr', 'state', 'nick'],
            data : Ext.exampledata.states // from states.js
        });
    
        var combo = new Ext.form.ComboBox({
            store: store,
            displayField:'state',
            triggerAction: 'all',
            mode: 'local',
    		anchor: '0',
    		fieldLabel: 'Combo',
    		hidden: false,
    		readOnly: false,
    		editable: false
        });
    
        new Ext.form.FormPanel({
    		height: 100,
    		bodyStyle: 'padding: 10px;',
        	title: 'ComboBox Width',
        	hideCollapseTool: true,
        	renderTo: Ext.getBody(),
    		items: combo,
    		fbar: new Ext.Toolbar({
    			items: [{
    				text: 'Show/Hide ComboBox',
    				handler: function () {
    					this.setVisible(this.hidden);
    				},
    				scope: combo
    			}, {
    				text: 'Set/Unset ComboBox read-only',
    				handler: function () {
    					this.setReadOnly(!this.readOnly);
    				},
    				scope: combo
    			}]
    		})
        });
    });

    Steps to reproduce the problem:
    • Click on 'Show/Hide ComboBox' button -> combo is now hidden
    • Click on 'Set/Unset Combobox read-only' button
    • Click on 'Show/Hide ComboBox' button -> combo is now visible


    The result that was expected:
    • Width of ComboBox is same as before hide because it is calculated by layout


    The result that occurs instead:
    • Width of ComboBox is about 20px even width of panel is bigger.


    Debugging already done:
    • Ext.form.TriggerField.onResize is called with wrong width from Ext.form.TriggerField.updateEditState because width of elements with style 'display: none' is 0


    Possible fix:
    • not provided

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Workaround: Set the combobox to hideMode:'offsets'.

  3. #3

    Default

    This issue still can be reproduced in IE7,8,9.
    Calling setReadOnly twice with false and true arguments causes trigger field size to be corrupted. Any possible solutions?

  4. #4
    Sencha Premium Member
    Join Date
    Aug 2007
    Location
    Pilsen, Czech Republic
    Posts
    41

    Default


    Quote Originally Posted by SilentBob View Post
    This issue still can be reproduced in IE7,8,9.
    Calling setReadOnly twice with false and true arguments causes trigger field size to be corrupted. Any possible solutions?
    Which version of ExtJS are you using?

  5. #5

    Default

    Quote Originally Posted by dherbolt View Post

    Which version of ExtJS are you using?
    Hello. Thank for your reply.
    I'm using ExtJs v. 3.4.0.

    I'm investigating this issue in my application now and I noticed that issue is reproduced when components are added into collapsible Panel, which is collapsed by default. When Panel is not initially collapsed then everything works fine.

  6. #6
    Sencha Premium Member
    Join Date
    Aug 2007
    Location
    Pilsen, Czech Republic
    Posts
    41

    Default

    I'm not sure if it fix your problem, but in my case I found this solution:

    Code:
    Ext.form.TriggerField.prototype.initTrigger = Ext.form.TriggerField.prototype.initTrigger.createSequence(function () {
    	if (!this.hideTrigger) {
    		this.trigger.getWidth = Ext.Element.prototype.getComputedWidth;
    	}
    
    	if (!Ext.isIE) { //Safari, Firefox
    		this.el.getWidth = Ext.Element.prototype.getComputedWidth;
    	}
    });

  7. #7
    Sencha User
    Join Date
    Jun 2011
    Posts
    2

    Default

    Quote Originally Posted by Condor View Post
    Workaround: Set the combobox to hideMode:'offsets'.
    Hi Condor, when I set the combobox to hideMode:'offsets', there are still have this problem.

  8. #8
    Sencha User
    Join Date
    Jun 2011
    Posts
    2

    Default

    Quote Originally Posted by dherbolt View Post
    I'm not sure if it fix your problem, but in my case I found this solution:

    Code:
    Ext.form.TriggerField.prototype.initTrigger = Ext.form.TriggerField.prototype.initTrigger.createSequence(function () {
        if (!this.hideTrigger) {
            this.trigger.getWidth = Ext.Element.prototype.getComputedWidth;
        }
    
        if (!Ext.isIE) { //Safari, Firefox
            this.el.getWidth = Ext.Element.prototype.getComputedWidth;
        }
    });
    Hi Dherbolt, I have the the same problem, I try your solution, but there are still have problem. when set the comobox to readonly, the comobox's width reduce 17px.

  9. #9

    Default

    Code:
    Ext.override(Ext.form.TriggerField, {
       updateEditState: function(){
          if(this.rendered){
             if (this.readOnly) {
                this.el.dom.readOnly = true;
                this.el.addClass('x-trigger-noedit');
                this.mun(this.el, 'click', this.onTriggerClick, this);
                this.trigger.setDisplayed(false);
             } else {
                if (!this.editable) {
                   this.el.dom.readOnly = true;
                   this.el.addClass('x-trigger-noedit');
                   this.mon(this.el, 'click', this.onTriggerClick, this);
                } else {
                   this.el.dom.readOnly = false;
                   this.el.removeClass('x-trigger-noedit');
                   this.mun(this.el, 'click', this.onTriggerClick, this);
                }
                this.trigger.setDisplayed(!this.hideTrigger);
             }
             //call this.onResize in case of width is greater then 0
             if (this.width || this.wrap.getWidth())
                this.onResize(this.width || this.wrap.getWidth());
          }
       }
    });

Similar Threads

  1. [DEFER] Combobox multiple inputs
    By merovius in forum Ext 3.x: Bugs
    Replies: 1
    Last Post: 2 Jun 2010, 8:42 AM
  2. Replies: 1
    Last Post: 4 Feb 2010, 6:19 AM
  3. ComboBox Items not taking full width of ComboBox Field
    By Hemant Bob in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 6 Jan 2009, 5:02 AM
  4. Replies: 1
    Last Post: 22 Jun 2008, 6:06 AM
  5. Replies: 2
    Last Post: 20 Oct 2007, 7:50 AM

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
  •