Results 1 to 10 of 10

Thread: Locked split grid cuts off last locked column

  1. #1
    Sencha Premium User
    Join Date
    Oct 2015
    Location
    Arvada, CO
    Posts
    76
    Answers
    3

    Default Locked split grid cuts off last locked column

    In this example, if you scroll over on the locked column side, you'll see that the last column (SubCol2) is cut short... the column is set to align right, and all of the data is not being shown (see attached image). It's also more apparent when the sort is applied. The horizontal scrollbar is also cut off... the right arrow does not appear. It's almost as if the vertical split is not being accounted for in the calculation of the flex, but if I take off the split: true, it does not fix my issue. It also just might be that I have something set up incorrectly. Any help?
    Code:
    Ext.state.Manager.setProvider(Ext.create('Ext.state.LocalStorageProvider'));
    var columns = [{
        text: 'Col1',
        dataIndex: 'name',
        stateId: 'nameColumn',
        flex: 1,
        locked: true,
        width: 80,
        minWidth: 120
    }, {
        text: 'Col2',
        dataIndex: 'phone',
        stateId: 'phoneColumn',
        flex: 1,
        locked: true,
        width: 80,
        minWidth: 120
    }, {
        text: 'Col3',
        dataIndex: 'email',
        stateId: 'emailColumn',
        flex: 1,
        locked: true,
        width: 80,
        minWidth: 120
    }, {
        text: 'Col4',
        dataIndex: 'email',
        stateId: 'emailColumn',
        flex: 1,
        locked: true,
        width: 80,
        minWidth: 120
    }, {
        text: 'Col5',
        dataIndex: 'email',
        stateId: 'emailColumn',
        flex: 1,
        locked: true,
        width: 80,
        minWidth: 120
    }, {
        text: 'Col6',
        dataIndex: 'email',
        stateId: 'emailColumn',
        flex: 1,
        locked: true,
        width: 80,
        minWidth: 120
    }, {
        text: 'Col7',
        locked: true,
        columns: [{
            text: 'SubCol1',
            dataIndex: 'subCol1',
            width: 80,
            locked: true
        }, {
            text: 'SubCol2',
            dataIndex: 'subCol2',
            width: 80,
            locked: true,
            align: 'right'
        }]
    }];
    var weeks = [{
        text: 'Week1',
        dataIndex: 'day1',
        stateId: 'day1Column',
        flex: 1,
        locked: false,
        width: 80,
        minWidth: 100
    }, {
        text: 'Week2',
        dataIndex: 'day2',
        stateId: 'day2Column',
        flex: 1,
        locked: false,
        width: 80,
        minWidth: 100
    }, {
        text: 'Week3',
        dataIndex: 'day3',
        stateId: 'day3Column',
        flex: 1,
        locked: false,
        width: 80,
        minWidth: 100
    }, {
        text: 'Week4',
        dataIndex: 'day4',
        stateId: 'day4Column',
        flex: 1,
        locked: false,
        width: 80,
        minWidth: 100
    }, {
        text: 'Week5',
        dataIndex: 'day5',
        stateId: 'day5Column',
        flex: 1,
        locked: false,
        width: 80,
        minWidth: 100
    }, {
        text: 'Week6',
        dataIndex: 'day6',
        stateId: 'day6Column',
        flex: 1,
        locked: false,
        width: 80,
        minWidth: 100
    }, {
        text: 'Week7',
        dataIndex: 'day4',
        stateId: 'day4Column',
        flex: 1,
        locked: false,
        width: 80,
        minWidth: 100
    }, {
        text: 'Week8',
        dataIndex: 'day5',
        stateId: 'day5Column',
        flex: 1,
        locked: false,
        width: 80,
        minWidth: 100
    }, {
        text: 'Week9',
        dataIndex: 'day6',
        stateId: 'day6Column',
        flex: 1,
        locked: false,
        width: 80,
        minWidth: 100
    }];
    var columns1 = columns.concat(weeks);
    Ext.define('MyView', {
        extend: 'Ext.app.ViewModel',
        alias: 'viewmodel.myView',
        stores: {
            myStore: {
                fields: ['name', 'phone', 'email', 'day1', 'day2', 'day3', 'day4', 'day5', 'day6'],
                autoLoad: true,
                proxy: {
                    type: 'ajax',
                    url: 'data2.json'
                }
            }
        }
    });
    
    Ext.define('MyGrid', {
        extend: 'Ext.grid.Panel',
        viewModel: {
            type: 'myView'
        },
        alias: 'widget.myGrid',
        title: 'Locked Grid',
        columns: columns1,
        enableLocking: true,
        split: true,
        flex: 1,
        lockedViewConfig: {
            scroll: 'horizontal'
        },
        lockedGridConfig: {
            flex: 2,
            forceFit: true
        },
        bind: {
            store: '{myStore}'
        }
    });
    Ext.define('Test.MyMainView', {
           extend: 'Ext.container.Container',
        layout: 'fit',
        items: [{
            xtype: 'myGrid'
        }]
    });
    Ext.application({
      name: 'Fiddle',
      autoCreateViewport: 'Test.MyMainView'
    });
    Attached Images Attached Images

  2. #2
    Sencha Premium User
    Join Date
    Oct 2015
    Location
    Arvada, CO
    Posts
    76
    Answers
    3

    Default

    Further testing has shown that the issue is not present in 5.0.x, but the issue is present onward (including 6.x).

  3. #3
    Sencha User
    Join Date
    Jan 2016
    Posts
    462
    Answers
    60

    Default

    I took off align:right and that fixed it for mine.

  4. #4
    Sencha Premium User
    Join Date
    Oct 2015
    Location
    Arvada, CO
    Posts
    76
    Answers
    3

    Default

    Quote Originally Posted by alex.volfson View Post
    I took off align:right and that fixed it for mine.
    No it does not... the column still looks like it's been shortchanged, and the right arrow still does not appear for the scrollbar.

  5. #5
    Sencha User
    Join Date
    Jan 2016
    Posts
    462
    Answers
    60

    Default

    Which browser are you seeing this in? I just upgraded Chrome and the issue disappeared.

  6. #6
    Sencha Premium User
    Join Date
    Oct 2015
    Location
    Arvada, CO
    Posts
    76
    Answers
    3

    Default

    I primarily use Firefox... but I've tested it in:
    FF 43.0.4, 64-bit
    Chrome 47.0.2526.111
    IE 11 (horizontal scrollbar was complete, but the column was still messed up)

    And the solution should not be to take off align right... as that's what I want to use.

  7. #7
    Sencha User
    Join Date
    Jan 2016
    Posts
    462
    Answers
    60

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  8. #8
    Sencha User
    Join Date
    Jan 2016
    Posts
    462
    Answers
    60

    Default

    One of our engineers updated your fiddle with an override fix.

  9. #9
    Sencha Premium User
    Join Date
    Oct 2015
    Location
    Arvada, CO
    Posts
    76
    Answers
    3

    Default

    Wonderful. Thank you all!

  10. #10
    Sencha Premium User
    Join Date
    Oct 2015
    Location
    Arvada, CO
    Posts
    76
    Answers
    3

    Default

    Quote Originally Posted by alex.volfson View Post
    One of our engineers updated your fiddle with an override fix.
    Am I going crazy, or does this fix no longer work?

Similar Threads

  1. Replies: 1
    Last Post: 3 May 2017, 5:34 AM
  2. Replies: 2
    Last Post: 29 Oct 2015, 3:38 AM
  3. Replies: 3
    Last Post: 23 Oct 2014, 4:48 AM
  4. Replies: 1
    Last Post: 27 Jul 2012, 1:39 PM
  5. Replies: 1
    Last Post: 30 Mar 2011, 11:07 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •