Results 1 to 4 of 4

Thread: 4.2.0 Combobox Width Incorrect When matchFieldWidth = false And Text is Short

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    12
    Vote Rating
    1
      0  

    Default 4.2.0 Combobox Width Incorrect When matchFieldWidth = false And Text is Short

    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.2.0

    Browser versions tested against:
    • Chrome

    Description:
    • When using a combobox with a pagingtoolbar, matchFieldWidth = false, and data with very short text length (less than the default 70px min width), the combobox does not resize to fit the pager

    The result that was expected:
    • The width of the combobox picker should resize to fit the paging toolbar

    The result that occurs instead:
    • The width of the combobox picker stays at 70px

    Test Case:


    Code:
    Ext.onReady(function() {
        var addUserForm = Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        items: [
                {
                    xtype: 'combobox',
                    name: 'short',
                    fieldLabel: 'Short (Broken)',
                    forceSelection: true,
                    matchFieldWidth: false,
                    store: {
                        model: 'Test.model.Short',
                        autoLoad: true,
                        pageSize: 50
                    },
                    //listConfig: {minWidth: 0}, // Uncommenting this will fix the issue but makes the loading indicator look odd...
                    displayField: 'name',
                    valueField: 'id',
                    pageSize: 1 // I know this just needs to be any value > 0 to show the pager, just putting 50 for consistency
                },
                {
                    xtype: 'combobox',
                    name: 'long',
                    fieldLabel: 'Long (Works)',
                    forceSelection: true,
                    matchFieldWidth: false,
                    store: {
                        model: 'Test.model.Long',
                        autoLoad: true,
                        pageSize: 50
                    },
                    displayField: 'name',
                    valueField: 'id',
                    pageSize: 1 // I know this just needs to be any value > 0 to show the pager, just putting 50 for consistency
                }
            ],
        });
           
    });
    
    
    Ext.define('Test.model.Short', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'id' },
            { name: 'name' }
        ],
        proxy: {
            type: 'jsonp',
            url: 'http://pmvitals.com/short.aspx',
            reader: {
                root: 'data'
            }
        }
    });
    
    
    Ext.define('Test.model.Long', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'id' },
            { name: 'name' }
        ],
        proxy: {
            type: 'jsonp',
            url: 'http://pmvitals.com/long.aspx',
            reader: {
                root: 'data'
            }
        }
    });





    HELPFUL INFORMATION


    See this URL for live test case: http://jsfiddle.net/mgolus/yTb6d/




    Debugging already done:
    • Setting the minWidth to 0 using the listConfig config of the combobox makes the picker render correctly, but doesn't provide room for a loading indicator
    *EDIT BY SLEMMON
    Issue observed in 4.1.1, 4.1.3, 4.2, and 4.2.1.883
    Last edited by slemmon; 21 May 2013 at 10:55 AM. Reason: additional test versions

  2. #2
    Sencha - Documentation Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,162
    Vote Rating
    257
      0  

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    12
    Vote Rating
    1
      0  

    Default

    This issue still exists in 4.2.2.

    Previously it was mentioned that when the content in the list is less than 70 px width, the picker does not show up wide enough to see the paging toolbar at the bottom. See Attachment 1. Upon further digging in, it appears the magic number is 68px wide.

    By overriding the function measureContentWidth in Ext.layout.component.BoundList to the following:

    Code:
        measureContentWidth: function (ownerContext) {
            return 68 // this.owner.listEl.getWidth();
        }
    The list is rendered correctly for all widths of content (see attachments 2 & 3).

    If the width is 67px, it goes back to being too narrow:

    Code:
        measureContentWidth: function (ownerContext) {
            return 67 // this.owner.listEl.getWidth();
        }
    By overriding this functions to return the arbitrary number 100, it seems to fix my rendering issues in all of my test cases. I'm sure this isn't the ideal solution, but it at least provides a fix until this bug is addressed.

    Code:
        measureContentWidth: function (ownerContext) {
            return 100; // this.owner.listEl.getWidth();
        }
    Attached Images Attached Images

  4. #4
    Sencha Premium User
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    74
    Vote Rating
    4
      0  

    Default

    I just noticed the same behaviour on ExtJS 5.1.2. I don't know, if I should open another bug report for that, probably not.

    I found out: The mysterious 70px is the default minWidth of the boundlist (defined in defaultListConfig in ComboBox class). So it totally depends on the minWidth of the boundlist. As a workaround I could recommend overriding minWidth with null instead:

    Code:
    xtype: 'combobox',
    listConfig: {
        minWidth: null
    }
    Here's my fiddle:

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
  •