You found a bug! We've classified it as EXTJS-9912 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    12
    Vote Rating
    1
    mgolus is on a distinguished road

      0  

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

    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 - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      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
    mgolus is on a distinguished road

      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

Thread Participants: 1

Tags for this Thread