X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/grid/groupgrid.js diff --git a/examples/grid/groupgrid.js b/examples/grid/groupgrid.js new file mode 100644 index 00000000..6f15c69f --- /dev/null +++ b/examples/grid/groupgrid.js @@ -0,0 +1,249 @@ +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', { + storeId: 'restaraunts', + model: 'Restaurant', + sorters: ['cuisine','name'], + groupField: 'cuisine', + data: [{ + 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: 'Cafe Renzo', + cuisine: 'Italian' + },{ + 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' + }] + }); + + var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{ + groupHeaderTpl: 'Cuisine: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})' + }); + + 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', + features: [groupingFeature], + columns: [{ + text: 'Name', + flex: 1, + dataIndex: 'name' + },{ + text: 'Cuisine', + flex: 1, + dataIndex: 'cuisine' + }], + fbar : ['->', { + text:'Clear Grouping', + iconCls: 'icon-clear-group', + handler : function(){ + groupingFeature.disable(); + } + }] + }); +});