Ext JS 5.0 columnLines not aligned with grid header

[SebTardif]

You can reproduce by modifying slightly example provided by Sencha with Ext JS 5, try the examples/grid/binding.html with the following replacement for binding.js.

Ext.require([    'Ext.grid.*',
    'Ext.data.*',
    'Ext.panel.*',
    'Ext.layout.container.Border'
]);


Ext.onReady(function(){
    Ext.define('Book',{
        extend: 'Ext.data.Model',
        proxy: {
            type: 'ajax',
            reader: 'xml'
        },
        fields: [
            // set up the fields mapping into the xml doc
            // The first needs mapping, the others are very basic
            {name: 'Author', mapping: '@author.name'},
            'Title',
            'Manufacturer',
            'ProductGroup',
            'DetailPageURL'
        ]
    });


    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        model: 'Book',
        proxy: {
            // load using HTTP
            type: 'ajax',
            url: 'sheldon.xml',
            // the return will be XML, so lets set up a reader
            reader: {
                type: 'xml',
                record: 'Item',
                totalProperty  : 'total'
            }
        }
    });


    // create the grid
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
		 columnLines: true,
        columns: [
            {text: "Author", width: 120, dataIndex: 'Author', sortable: true},
            {text: "Title", flex: 100, dataIndex: 'Title', sortable: true},
            {text: "Manufacturer", width: 125, dataIndex: 'Manufacturer', sortable: true},
			 {text: "Manufacturer", flex: 70, dataIndex: 'Manufacturer', sortable: true},
			 {text: "Manufacturer", flex: 70, dataIndex: 'Manufacturer', sortable: true},
            {text: "Product Group", width: 125, dataIndex: 'ProductGroup', sortable: true},
			{text: "Manufacturer", flex: 70, dataIndex: 'Manufacturer', sortable: true}
        ],
        forceFit: true,
        height:410,
        split: true,
        region: 'north'
    });
        
    // define a template to use for the detail view
    var bookTplMarkup = [
        'Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>',
        'Author: {Author}<br/>',
        'Manufacturer: {Manufacturer}<br/>',
        'Product Group: {ProductGroup}<br/>'
    ];
    var bookTpl = Ext.create('Ext.Template', bookTplMarkup);


    Ext.create('Ext.Panel', {
        renderTo: 'binding-example',
        frame: true,
        title: 'Book List',
        width: 580,
        height: 400,
        layout: 'border',
        items: [
            grid, {
                id: 'detailPanel',
                region: 'center',
                bodyPadding: 7,
                bodyStyle: "background: #ffffff;",
                html: 'Please select a book to see additional details.'
        }]
    });
    
    // update panel body on selection change
    grid.getSelectionModel().on('selectionchange', function(sm, selectedRecord) {
        if (selectedRecord.length) {
            var detailPanel = Ext.getCmp('detailPanel');
            detailPanel.update(bookTpl.apply(selectedRecord[0].data));
        }
    });


    store.load();
});

MixedUpColumnHeadersAlignment.PNG

[evant]

This is a known issue, linked to the appropriate ticket here.

[SebTardif]

For completeness, existing example without modifications also shows the problem: http://dev.sencha.com/extjs/5.0.0/ex...ink/#soap-grid

I remember some of the version of Ext JS 4 included a test framework that take picture and compare the pixels, that sound like a very good idea to use that against the kitchensink examples.

Having a QA team that take a quick 5 seconds look at the provided examples would also help ;-)

[wemerson.januario]

Appears to be still buggy in ExtJs 5.0.1

[SebTardif]

The same example using 5.0.1 does look better: http://dev.sencha.com/extjs/5.0.1/examples/kitchensink/#soap-grid

But you can see that column Title has some negative padding.

[wemerson.januario]

The same example using 5.0.1 does look better: http://dev.sencha.com/extjs/5.0.1/examples/kitchensink/#soap-grid

But you can see that column Title has some negative padding.

Yes! I can see!

[nhennebe80]

Is there is a workaround for this bug? Will this be fixed in 5.0.2?

[SebTardif]

This seems fixed, see http://dev.sencha.com/ext/5.1.0/exam...ink/#soap-grid

[bellingham]

Is there maybe a workaround? This problem still occurres in our application (6.2.1).

[harshapenikalapati]

I am also facing this issue .. when there are a lot of columns and when screen resolution is either < 100 or > 100, the column lines are not aligned with cell lines. I am using version v6.1.3.42. Please let me how to solve this. Thanks in advance.