Grid scroll to group headers

[rarerules]

I have a grouped grid with a lot of rows. I would like to add a button to the grid's toolbar which allows the user to automatically scroll to any of the grid's grouped headers. So if group A is visible, and group B is not, a button would automatically scroll the grid to the location of group B in the grid.

I know of the view's focusRow() function, I just don't know how to use it in this context. Thanks!

[scottmartin]

You should be able to use select to select the index of the 1st item in a group.

grid.getSelectionModel().select(2);

You will need to determine the index.

Scott.

[slemmon]

See if this is kinda what you're looking for. Probably a little hacky, but seemed to work (did the focusRow twice since if the group is collapsed it expands the group, but does not focus the row and if it's expanded it focuses the row).

var store = Ext.create('Ext.data.Store', {
    storeId:'employeeStore',
    fields:['name', 'seniority', 'department'],
    groupField: 'department',
    data: {'employees':[
        { "name": "Michael Scott",  "seniority": 7, "department": "Management" },
        { "name": "Andy Bernard",  "seniority": 7, "department": "Management" },
        { "name": "Dwight Schrute", "seniority": 2, "department": "Sales" },
        { "name": "Jim Halpert",    "seniority": 3, "department": "Sales" },
        { "name": "Kevin Malone",   "seniority": 4, "department": "Accounting" },
        { "name": "Angela Martin",  "seniority": 5, "department": "Accounting" },
        { "name": "Oscar Martinez",  "seniority": 5, "department": "Accounting" }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'employees'
        }
    }
});


Ext.create('Ext.grid.Panel', {
    title: 'Employees',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [
        { text: 'Name',     dataIndex: 'name' },
        { text: 'Seniority', dataIndex: 'seniority' }
    ],
    features: [{ftype:'grouping'}],
    width: 200,
    height: 275,
    renderTo: Ext.getBody()
    , dockedItems: [{
        xtype: 'toolbar'
        , dock: 'top'
        , items: [{
            text: 'Sales'
            , handler: function (btn) {
                var grid = btn.up('gridpanel');
                grid.getView().focusRow(grid.store.findRecord(grid.store.groupField, btn.text));
                grid.getView().focusRow(grid.store.findRecord(grid.store.groupField, btn.text));
            }
        }]
    }]
});