Code:
Ext.require(['Ext.data.*', 'Ext.grid.*']);
Ext.onReady(function() {
// wrapped in closure to prevent global vars.
Ext.define('Restaurant', {
extend: 'Ext.data.Model',
fields: ['name', 'cuisine']
});
var restaurants = Ext.create('Ext.data.Store', {
autoLoad: true,
storeId: 'restaraunts',
model: 'Restaurant',
groupField: 'cuisine',
sorters: ['cuisine','name'],
proxy: {
type: 'ajax',
url: 'groupgrid.json',
reader: {
type: 'json'
}
}
});
var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: '{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
hideGroupedHeader: true,
startCollapsed: true,
id: 'restaurantGrouping'
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
collapsible: true,
iconCls: 'icon-grid',
frame: true,
store: restaurants,
width: 600,
height: 400,
title: 'Restaurants',
resizable: true,
features: [groupingFeature],
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
},{
text: 'Cuisine',
flex: 1,
dataIndex: 'cuisine'
}]
});
});
groupgrid.json:
Code:
[{"name":"Cheesecake Factory","cuisine":"American"},{"name":"University Cafe","cuisine":"American"},{"name":"Slider Bar","cuisine":"American"},{"name":"Shokolaat","cuisine":"American"},{"name":"Gordon Biersch","cuisine":"American"},{"name":"Crepevine","cuisine":"American"},{"name":"Creamery","cuisine":"American"},{"name":"Old Pro","cuisine":"American"},{"name":"Nola's","cuisine":"Cajun"},{"name":"House of Bagels","cuisine":"Bagels"},{"name":"The Prolific Oven","cuisine":"Sandwiches"},{"name":"La Strada","cuisine":"Italian"},{"name":"Buca di Beppo","cuisine":"Italian"},{"name":"Pasta?","cuisine":"Italian"},{"name":"Madame Tam","cuisine":"Asian"},{"name":"Sprout Cafe","cuisine":"Salad"},{"name":"Pluto's","cuisine":"Salad"},{"name":"Junoon","cuisine":"Indian"},{"name":"Bistro Maxine","cuisine":"French"},{"name":"Three Seasons","cuisine":"Vietnamese"},{"name":"Sancho's Taquira","cuisine":"Mexican"},{"name":"Reposado","cuisine":"Mexican"},{"name":"Siam Royal","cuisine":"Thai"},{"name":"Krung Siam","cuisine":"Thai"},{"name":"Thaiphoon","cuisine":"Thai"},{"name":"Tamarine","cuisine":"Vietnamese"},{"name":"Joya","cuisine":"Tapas"},{"name":"Jing Jing","cuisine":"Chinese"},{"name":"Patxi's Pizza","cuisine":"Pizza"},{"name":"Evvia Estiatorio","cuisine":"Mediterranean"},{"name":"Cafe 220","cuisine":"Mediterranean"},{"name":"Cafe Renaissance","cuisine":"Mediterranean"},{"name":"Kan Zeman","cuisine":"Mediterranean"},{"name":"Gyros-Gyros","cuisine":"Mediterranean"},{"name":"Mango Caribbean Cafe","cuisine":"Caribbean"},{"name":"Coconuts Caribbean Restaurant & Bar","cuisine":"Caribbean"},{"name":"Rose & Crown","cuisine":"English"},{"name":"Baklava","cuisine":"Mediterranean"},{"name":"Mandarin Gourmet","cuisine":"Chinese"},{"name":"Bangkok Cuisine","cuisine":"Thai"},{"name":"Darbar Indian Cuisine","cuisine":"Indian"},{"name":"Mantra","cuisine":"Indian"},{"name":"Janta","cuisine":"Indian"},{"name":"Hyderabad House","cuisine":"Indian"},{"name":"Starbucks","cuisine":"Coffee"},{"name":"Peet's Coffee","cuisine":"Coffee"},{"name":"Coupa Cafe","cuisine":"Coffee"},{"name":"Lytton Coffee Company","cuisine":"Coffee"},{"name":"Il Fornaio","cuisine":"Italian"},{"name":"Lavanda","cuisine":"Mediterranean"},{"name":"MacArthur Park","cuisine":"American"},{"name":"St Michael's Alley","cuisine":"Californian"},{"name":"Osteria","cuisine":"Italian"},{"name":"Vero","cuisine":"Italian"},{"name":"Cafe Renzo","cuisine":"Italian"},{"name":"Miyake","cuisine":"Sushi"},{"name":"Sushi Tomo","cuisine":"Sushi"},{"name":"Kanpai","cuisine":"Sushi"},{"name":"Pizza My Heart","cuisine":"Pizza"},{"name":"New York Pizza","cuisine":"Pizza"},{"name":"California Pizza Kitchen","cuisine":"Pizza"},{"name":"Round Table","cuisine":"Pizza"},{"name":"Loving Hut","cuisine":"Vegan"},{"name":"Garden Fresh","cuisine":"Vegan"},{"name":"Cafe Epi","cuisine":"French"},{"name":"Tai Pan","cuisine":"Chinese"}]