Columns in the column store may not reflect the order they appear in visually

[ExtAnimal]

So visibleColumns[0] may not be the first visible column. If a column with locked : true is specified after a column which has no locked or region property, or is region : 'normal'.

This is because they are ordered by the order in which sub grids are rendered which itself is by coincidence that "locked" sorts before "normal".

Change the groupedheaders example's columns spec to be

    columns : [
        {
            text     : 'Contact',
            children : [
                { text : 'First name', field : 'firstName', width : 150 },
                { text : 'Surname', field : 'surName', width : 150 },
                { text : 'City', field : 'city', width : 150 }
            ]
        },
        {
            text     : 'Favorites',
            children : [
                { text : 'Food', field : 'food', flex : 1 },
                {
                    text       : 'Color',
                    field      : 'color',
                    flex       : 1,
                    htmlEncode : false,
                    renderer   : ({ value, cellElement }) => {
                        cellElement.innerHTML = StringHelper.xss`<div class="color-box"></div>${value}`;
                        cellElement.firstElementChild.style.backgroundColor = value;
                    }

                }
            ]
        },
        { text : 'Customer#', field : 'id', width : 150, locked : true, editor : false },
    ],

And tabbing into the grid shows:

As you see, when it by default focuses column 0, that is "First Name", because that is the first column in the store.

Columns have to be sorted into region order, so that they conform to their visible indices.