Cómo mostrar columnas extJS después de cada registro que no está en la parte superior. Estoy agrupando la cuadrícula extJS con tres columnas y la agrupación funciona bien.

Aquí está el código y también podemos probarlo en fiddler.

 Ext.application({ name : 'Fiddle', launch : function() { var store = Ext.create('Ext.data.Store', { storeId:'employeeStore', fields:['name', 'seniority', 'department', 'sort', 'groupsort'], grouper: { groupFn: function(item) { return 'department: ' + item.get('department'); } }, // Have members of each group sorted on this field sorters: [{ property: 'name' }], data: {'employees':[ { "name": "Michael Scotts", "seniority": 7, "department": "Management", "groupsort" : "2" }, { "name": "Dwight Schrute", "seniority": 2, "department": "Sales", "groupsort" : "1" }, { "name": "Jim Halpert", "seniority": 3, "department": "Sales", "groupsort" : "1" }, { "name": "Kevin Malone", "seniority": 4, "department": "Accounting", "groupsort" : "3" }, { "name": "Angela Martin", "seniority": 5, "department": "Accounting", "groupsort" : "3" } ]}, proxy: { type: 'memory', reader: { type: 'json', rootProperty: 'employees' } } }); Ext.create('Ext.grid.Panel', { title: 'Employees', store: Ext.data.StoreManager.lookup('employeeStore'), columns: [ { text: 'Name', dataIndex: 'name' }, { text: 'Seniority', dataIndex: 'seniority' }, { text: 'Department', dataIndex: 'department', sortable: true } ], features: [{ ftype: 'grouping' }], renderTo: Ext.getBody() }); } });

Mi requisito es que quiero mostrar columnas no en la parte superior sino después de la agrupación para cada registro. ¿Hay alguna solución para eso?