Results 1 to 10 of 10

Thread: Ext JS 5.0 columnLines not aligned with grid header

    You found a bug! We've classified it as EXTJS-13507 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,294

    Default Ext JS 5.0 columnLines not aligned with grid header

    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.

    Code:
    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

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256

    Default

    This is a known issue, linked to the appropriate ticket here.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,294

    Default

    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 ;-)

  4. #4
    Sencha Premium User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Goiânia - GO, Brazil
    Posts
    902

    Default still buggy

    Appears to be still buggy in ExtJs 5.0.1
    Wemerson Januario @JanuarioCoder
    Novanti Tecnologia, Sencha MVP/ Ext JS Consultant
    ____________________________________________
    Hire me on UpWork:

    GitHub
    https://github.com/wemersonjanuario

    Treinamento e Consultoria Ext JS. QUALIFIQUE-SE JÁ!

  5. #5
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,294

    Default

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

    B
    ut you can see that column Title has some negative padding.

  6. #6
    Sencha Premium User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Goiânia - GO, Brazil
    Posts
    902

    Default

    Quote Originally Posted by SebTardif View Post
    The same example using 5.0.1 does look better: http://dev.sencha.com/extjs/5.0.1/examples/kitchensink/#soap-grid

    B
    ut you can see that column Title has some negative padding.

    Yes! I can see!
    Wemerson Januario @JanuarioCoder
    Novanti Tecnologia, Sencha MVP/ Ext JS Consultant
    ____________________________________________
    Hire me on UpWork:

    GitHub
    https://github.com/wemersonjanuario

    Treinamento e Consultoria Ext JS. QUALIFIQUE-SE JÁ!

  7. #7
    Sencha Premium Member
    Join Date
    Jul 2014
    Posts
    1

    Default

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

  8. #8
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,294

  9. #9
    Sencha Premium Member
    Join Date
    Oct 2015
    Posts
    22

    Default

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

  10. #10

    Default

    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.

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
  •