Results 1 to 6 of 6

Thread: [FIXED]Combo Box List Width

Hybrid View

Previous Post Previous Post   Next Post Next Post
    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Vote Rating
    18
      0  

    Default [FIXED]Combo Box List Width

    Neither method for setting the combo box list width seems to work within a form.

    I've tried both setting matchFieldWidth: true and setting listWidth.

    In both cases I get a width significantly wider than specified. See attachment.
    Attached Images Attached Images

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,380
    Vote Rating
    858
      0  

    Default

    Can you please post some sample code to demonstrate the issue? Also the browser version.

    Code:
    Ext.require([
        'Ext.form.FormPanel',
        'Ext.layout.container.Anchor',
        'Ext.data.*'
    ]);
    
    Ext.onReady(function() {
        Ext.create('Ext.form.FormPanel', {
            renderTo: Ext.getBody(),
            title: 'Form Panel',
            bodyStyle: 'padding:5px 5px 0',
            width: 600,
            fieldDefaults: {
                labelAlign: 'top',
                msgTarget: 'side'
            },
            defaults: {
                border: false,
                xtype: 'panel',
                flex: 1,
                layout: 'anchor'
            },
    
            layout: 'hbox',
            items: [{
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'First Name',
                    anchor: '-5',
                    name: 'first'
                }, {
                    xtype:'textfield',
                    fieldLabel: 'Company',
                    anchor: '-5',
                    name: 'company'
                }]
            }, {
                items: [{
                    xtype:'combo',
                    fieldLabel: 'Last Name',
                    anchor: '100%',
                    store: [[1, 'One'], [2, 'Two'], [3, 'Three']]
                },{
                    xtype:'textfield',
                    fieldLabel: 'Email',
                    anchor: '100%',
                    name: 'email',
                    vtype:'email'
                }]
            }],
            buttons: ['->', {
                text: 'Save'
            }, {
                text: 'Cancel'
            }]
        });
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Vote Rating
    18
      0  

    Default

    Sure. The browser is chrome 9.0.597.98, and I've also verified it with firefox.

    Code:
    			this.mainFrame = Ext.create ('widget.window', {
    				bodyBorder: false,
    				closable: false,
    				layout: 'hbox',
    				modal: true,
    				onExc: Ext.emptyFn,
    				resizable: false,
    				title: this.translate ('login', true),
    				width: 391,
    				items: [{
    					width: 111,
    					height: 166,
    					xtype: 'box',
    					autoEl: {
    						tag: 'img',
    						src: 'img/login.png',
    						alt: ''
    					}
    				}, {
    					xtype: 'form',
    					baseCls: 'x-plain',
    					defaultButton: 'login',
    					autoHeight: true,
    					width: 240,
    					margins: '5px 5px 5px 15px',
    					defaults: {
    						validateOnBlur: false,
    						validationEvent: false,
    						allowBlank: false
    					},
    					defaultType: 'textfield',
    					items: [{
    						name: 'userName',
    						fieldLabel: 'User Name'
    					}, {
    						name: 'passwd',
    						inputType: 'password',
    						fieldLabel: 'Password'
    					}, {
    						xtype: 'combo',
    						fieldLabel: 'Language',
    						allowBlank: false,
    						editable: false,
    						forceSelection: true,
    						queryMode: 'local',
    						store: 'stores.LoginLanguages',
    						triggerAction: 'all',
    						displayField: 'text',
    						valueField: 'value',
    						value: language,
    						matchFieldWidth: true
    //						listWidth: 127
    					}],
    					buttons: [{
    						text: 'Login',
    						id: 'login',
    						scope: this,
    						handler: function (b) {
    						}
    					}]
    				}]
    			});
    					
    			this.mainFrame.show();

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,380
    Vote Rating
    858
      0  

    Default

    Ok thanks, a fix has been added.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Vote Rating
    18
      0  

    Default

    Great. Thanks!

  6. #6
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Vote Rating
    18
      0  

    Default

    Confirmed fixed in pr2.

Similar Threads

  1. Combo box list width (again)
    By luv2hike in forum Ext 2.x: Help & Discussion
    Replies: 14
    Last Post: 16 Jun 2011, 11:19 AM
  2. combo box width dependent of list items' text width
    By wp.joju in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 6 Jul 2010, 9:27 PM
  3. Combo list width frustration.
    By dlgoodchild in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 13 Aug 2009, 1:51 PM
  4. Combo box: item list's width doesn't match combo width
    By dante in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 10 Jul 2009, 8:02 AM

Posting Permissions

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