Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / grid / remote-group-summary-grid.js

diff --git a/examples/grid/remote-group-summary-grid.js b/examples/grid/remote-group-summary-grid.js
new file mode 100644 (file)
index 0000000..353f795
--- /dev/null
+++ b/examples/grid/remote-group-summary-grid.js
@@ -0,0 +1,115 @@
+Ext.require([
+    'Ext.grid.*',
+    'Ext.data.*'
+]);
+
+Ext.onReady(function(){
+    Ext.define('Task', {
+        extend: 'Ext.data.Model',
+        idProperty: 'taskId',
+        fields: [
+            {name: 'projectId', type: 'int'},
+            {name: 'project', type: 'string'},
+            {name: 'taskId', type: 'int'},
+            {name: 'description', type: 'string'},
+            {name: 'estimate', type: 'float'},
+            {name: 'rate', type: 'float'},
+            {name: 'cost', type: 'float'},
+            {name: 'due', type: 'date', dateFormat:'m/d/Y'}
+        ]    
+    });
+    
+    var store = Ext.create('Ext.data.Store', {
+        model: 'Task',
+        autoLoad: true,
+        proxy: {
+            type: 'ajax',
+            url: 'remote-group-summary-grid.json',
+            reader: {
+                type: 'json',
+                root: 'data'
+            }
+        },
+        sorters: {property: 'due', direction: 'ASC'},
+        groupField: 'project'
+    });
+    
+    var grid = Ext.create('Ext.grid.Panel', {
+        width: 800,
+        height: 450,
+        title: 'Sponsored Projects',
+        renderTo: Ext.getBody(),
+        store: store,
+        viewConfig: {
+            stripeRows: false
+        },
+        dockedItems: [{
+            dock: 'top',
+            xtype: 'toolbar',
+            items: [{
+                text: 'Show Summary',
+                pressed: true,
+                enableToggle: true,
+                toggleHandler: function(btn, pressed){
+                    var view = grid.getView();
+                    view.getFeature('group').toggleSummaryRow(pressed);
+                    view.refresh();
+                }
+            }]
+        }],
+        features: [{
+            id: 'group',
+            ftype: 'groupingsummary',
+            groupHeaderTpl: '{name}',
+            hideGroupedHeader: true,
+            remoteRoot: 'summaryData'
+        }],
+        columns: [{
+            text: 'Task',
+            flex: 1,
+            sortable: true,
+            dataIndex: 'description',
+            hideable: false,
+            summaryRenderer: function(v, params, data){
+                return ((v === 0 || v > 1) ? '(' + v + ' Tasks)' : '(1 Task)');
+            }
+        }, {
+            header: 'Project',
+            width: 20,
+            sortable: true,
+            dataIndex: 'project'
+        }, {
+            header: 'Due Date',
+            width: 80,
+            sortable: true,
+            dataIndex: 'due',
+            renderer: Ext.util.Format.dateRenderer('m/d/Y')
+        }, {
+            header: 'Estimate',
+            width: 75,
+            sortable: true,
+            dataIndex: 'estimate',
+            renderer: function(v){
+                return v + ' hours';
+            }
+        }, {
+            header: 'Rate',
+            width: 75,
+            sortable: true,
+            renderer: Ext.util.Format.usMoney,
+            dataIndex: 'rate',
+            summaryType: 'average'
+        }, {
+            id: 'cost',
+            header: 'Cost',
+            width: 75,
+            sortable: false,
+            groupable: false,
+            renderer: function(v, params, record){
+                return Ext.util.Format.usMoney(record.get('estimate') * record.get('rate'));
+            },
+            dataIndex: 'cost',
+            summaryRenderer: Ext.util.Format.usMoney
+        }]
+    });
+});