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,295
    Vote Rating
    117
      0  

    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,155
    Vote Rating
    986
      0  

    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,295
    Vote Rating
    117
      0  

    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
    831
    Vote Rating
    69
      0  

    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,295
    Vote Rating
    117
      0  

    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
    831
    Vote Rating
    69
      0  

    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
    Vote Rating
    0
      0  

    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,295
    Vote Rating
    117
      0  

  9. #9
    Sencha Premium Member
    Join Date
    Oct 2015
    Posts
    22
    Vote Rating
    3
      0  

    Default

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

  10. #10
    Sencha User
    Join Date
    Jan 2013
    Posts
    9
    Vote Rating
    0
      0  

    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
  •