How to display extJS columns after each record not on the top.
I am grouping extJS grid with three columns and grouping is working fine.
Here is the code and we can test in fiddler as well.
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()
});
}
});
My requierment is I want show columns not on the top but after the grouping for each record. Is there any workaround for that.