Multiple grid instances: sort headers broken

[Jacob Weber]

Sorry, one more :) Say I create two instances of the same subclass of Ext.ux.touch.grid.View, both with sortable columns. The second grid appears without sort indicators. And clicking the column headers from the second grid causes the sort indicators on the first grid to change. I think this is because it's calling getColumns(), which returns the same array instance for both grids, and modifying its elements.

Long example, but it's mostly based on your "sorted" example:

Ext.define('TestModel', {
    extend : 'Ext.data.Model',

    config : {
        fields : [
            'company',
            'price'
        ]
    }
});

var store = Ext.create('Ext.data.Store', {
    model : 'TestModel',
    sorters : [
        {
            property : 'price',
            direction : 'DESC'
        }
    ],
    data : [
        { company : 'A', price : 63.26},
        { company : 'B', price : 35.57},
        { company : 'C', price : 45.45}
    ]
});

var store2 = Ext.create('Ext.data.Store', {
    model : 'TestModel',
    sorters : [
        {
            property : 'price',
            direction : 'DESC'
        }
    ],
    data : [
        { company : 'D', price : 71.72},
        { company : 'E', price : 29.01},
        { company : 'F', price : 83.81}
    ]
});

Ext.define('MyGrid', {
    extend: 'Ext.ux.touch.grid.View',
    xtype: 'mygrid',
    config: {
        features : [
            {
                ftype   : 'Ext.ux.touch.grid.feature.Sorter',
                launchFn : 'initialize'
            }
        ],
        columns : [
            {
                header : 'Company',
                dataIndex : 'company',
                width : '50%'
            },
            {
                header : 'Price',
                dataIndex : 'price',
                width : '50%'
            }
        ]
    }
});

Ext.create('Ext.Container', {
    fullscreen : true,
    items : [
        {
            xtype : 'mygrid',
            height : 200,
            store : store
        },
        {
            xtype : 'mygrid',
            height : 200,
            store : store2
        }
    ]
});

[Mitchell Simoens]

I'm forcing a refresh when the store gets sorted. The store gets sorted but the dataview doesn't update like it should.

I pushed an update and updated the MVC example to have 2 grids