Ext version tested:

Adapter used:

css used:

Browser versions tested against:

Operating System:

  • Windows 8.1 Enterprise x64




Description:

  • When calling autoSize() method on Ext.grid.Panel column and when this column has values with text shorter than column title, title gets cropped in Chrome - few last chars are replaced with ellipsis.

  • Works fine in IE, FF.

  • This issue is present in ExtJS 4.2.2 only, works fine in 4.2.0, 4.2.1.

  • Issue is present when using ExtJS CSS file "ext-theme-classic-all-debug.css".




Test Case:

Code:



// Assuming you have <div id="grid-with-autosize"></div> somewhere in your HTML
Ext.onReady(function(){
    var column = Ext.create('Ext.grid.column.Column', {
        text: "Example Title",
        dataIndex: 'Value'
    });


    Ext.create('Ext.grid.Panel', {
        store: {
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json'
                }
            },
            fields: [ 'Value' ],
            data: [ { Value: '1' } ]
        },
        columns: [ column ],
        renderTo:'grid-with-autosize',
        listeners: {
            afterrender: function() {
                column.autoSize();
            }
        }
    });
});



See this URL : http://ift.tt/1hGt1FX. Note: There's no public CDN for ExtJS 4.2.2 so custom CSS was added to mimic 4.2.2 styles.

Steps to reproduce the problem:



  • Create new 'Ext.grid.Panel' with any columns and data

  • Ensure that some of those columns having title longer than any cell value

  • Invoke autoSize() on column(s) matching criteria above




The result that was expected:

  • Column title is not cropped in Chrome, all the title characters are visible

  • There is no ellipsis at the end of column title




The result that occurs instead:

  • Column title is cropped in Chrome - few last chars are replaced with ellipsis




Screenshot or Video:

Debugging already done:

  • Issue was introduced because style was changed for "x-column-header-text" class (in "ext-all.css") - "display: inline-block" part was removed in ExtJS 4.2.2. At least, grid works fine if this style change is reverted back.




Possible fix:

  • Update sources for "ext-theme-classic-all-debug.css" so that CSS generated for "x-column-header-text" class will look like this (changes are in red):


    Code:



    .x-column-header-text {
        white-space: nowrap;
        background-repeat: no-repeat;

        display: inline-block;
    }