Hello,
I need your help.
I'm started with a sample of extJS (Custom Group Summary Plugin Example) and it's Ok for a grouping grid with sum, average and etc.
But how can I use the same grouping value (sum, average, etc) in a chart ?

I give you all my files below :
(N.B.: The "ux" folder which is in the subfolder "example" of extJS has been copied in the extJS folder here...)

I have only 3 files :
. 1 XML file
. 1 index.html file
. 1 JavaScript file

Here is my index.html :
HTML Code:
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Grouping</title>
        <!-- Common Styles ExtJS -->
        <link rel="stylesheet" type="text/css" href="../extJS/resources/css/ext-all.css" />
            
        <!-- overrides to base library -->
        <link rel="stylesheet" type="text/css" href="../extJS/ux/css/GroupSummary.css" />

        <!-- GC -->
        <!-- LIBS -->
        <script type="text/javascript" src="../extJS/adapter/ext/ext-base.js"></script>
        <!-- ENDLIBS -->

        <!-- Common JavaScript ExtJS -->        
        <script type="text/javascript" src="../extJS/ext-all.js"></script>

        <!-- extensions -->
        <script type="text/javascript" src="../extJS/ux/GroupSummary.js"></script>        
        
        <!-- Common Styles for the Mock-Up -->
        <!-- <link rel="stylesheet" type="text/css" href="contents/css/globalStyle.css" />     -->    
        
        <!-- JavaScript for the Mock-Up --> 
        <script type="text/javascript" src="myForm.js"></script>
        
    </head>
    
    <body>

    </body>
    
</html>
Here is my XML file :
Code:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <Row>
        <projectId>100</projectId>
        <project>Ext Forms: Field Anchoring</project>
        <taskId>112</taskId> 
        <description>Integrate 2.0 Forms with 2.0 Layouts</description>
        <estimate>6</estimate>
        <rate>150</rate>
        <due>06/24/2007</due>
    </Row>
    <Row>
        <projectId>100</projectId>
        <project>Ext Forms: Field Anchoring</project>
        <taskId>113</taskId> 
        <description>Implement AnchorLayout</description>
        <estimate>4</estimate>
        <rate>150</rate>
        <due>06/25/2007</due>
    </Row>
    <Row>
        <projectId>100</projectId>
        <project>Ext Forms: Field Anchoring</project>
        <taskId>114</taskId> 
        <description>Add support for multiple types of anchors</description>
        <estimate>4</estimate>
        <rate>150</rate>
        <due>06/27/2007</due>
    </Row>
    <Row>
        <projectId>100</projectId>
        <project>Ext Forms: Field Anchoring</project>
        <taskId>115</taskId> 
        <description>Testing and debugging</description>
        <estimate>8</estimate>
        <rate>0</rate>
        <due>06/29/2007</due>
    </Row>
    <Row>
        <projectId>101</projectId>
        <project>Ext Grid: Single-level Grouping</project>
        <taskId>101</taskId> 
        <description>Add required rendering "hooks" to GridView</description>
        <estimate>6</estimate>
        <rate>100</rate>
        <due>07/01/2007</due>
    </Row>
    <Row>
        <projectId>101</projectId>
        <project>Ext Grid: Single-level Grouping</project>
        <taskId>102</taskId> 
        <description>Extend GridView and override rendering functions</description>
        <estimate>6</estimate>
        <rate>100</rate>
        <due>07/03/2007</due>
    </Row>    
    <Row>
        <projectId>101</projectId>
        <project>Ext Grid: Single-level Grouping</project>
        <taskId>103</taskId> 
        <description>Extend Store with grouping functionality</description>
        <estimate>4</estimate>
        <rate>100</rate>
        <due>07/04/2007</due>
    </Row>    
    <Row>
        <projectId>101</projectId>
        <project>Ext Grid: Single-level Grouping</project>
        <taskId>121</taskId> 
        <description>Default CSS Styling</description>
        <estimate>2</estimate>
        <rate>100</rate>
        <due>07/05/2007</due>
    </Row>    
    <Row>
        <projectId>101</projectId>
        <project>Ext Grid: Single-level Grouping</project>
        <taskId>104</taskId> 
        <description>Testing and debugging</description>
        <estimate>6</estimate>
        <rate>100</rate>
        <due>07/06/2007</due>
    </Row>    
    <Row>
        <projectId>102</projectId>
        <project>Ext Grid: Summary Rows</project>
        <taskId>105</taskId> 
        <description>Ext Grid plugin integration</description>
        <estimate>4</estimate>
        <rate>125</rate>
        <due>07/01/2007</due>
    </Row>        
    <Row>
        <projectId>102</projectId>
        <project>Ext Grid: Summary Rows</project>
        <taskId>106</taskId> 
        <description>Summary creation during rendering phase</description>
        <estimate>4</estimate>
        <rate>125</rate>
        <due>07/02/2007</due>
    </Row>    
    <Row>
        <projectId>102</projectId>
        <project>Ext Grid: Summary Rows</project>
        <taskId>107</taskId> 
        <description>Dynamic summary updates in editor grids</description>
        <estimate>6</estimate>
        <rate>125</rate>
        <due>07/05/2007</due>
    </Row>        
    <Row>
        <projectId>102</projectId>
        <project>Ext Grid: Summary Rows</project>
        <taskId>108</taskId> 
        <description>Remote summary integration</description>
        <estimate>4</estimate>
        <rate>125</rate>
        <due>07/05/2007</due>
    </Row>        
    <Row>
        <projectId>102</projectId>
        <project>Ext Grid: Summary Rows</project>
        <taskId>109</taskId> 
        <description>Summary renderers and calculators</description>
        <estimate>4</estimate>
        <rate>125</rate>
        <due>07/06/2007</due>
    </Row>    
    <Row>
        <projectId>102</projectId>
        <project>Ext Grid: Summary Rows</project>
        <taskId>110</taskId> 
        <description>Integrate summaries with GroupingView</description>
        <estimate>10</estimate>
        <rate>125</rate>
        <due>07/11/2007</due>
    </Row>    
    <Row>
        <projectId>102</projectId>
        <project>Ext Grid: Summary Rows</project>
        <taskId>111</taskId> 
        <description>Testing and debugging</description>
        <estimate>8</estimate>
        <rate>125</rate>
        <due>07/15/2007</due>
    </Row>        
</Root>
And here is my JavaScript file :
Code:
/*!
 * Ext JS Library 3.2.1
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * [email protected]
 * http://www.extjs.com/license
 */
Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.BLANK_IMAGE_URL = '../extJS/resources/images/default/s.gif';  // s.gif sur internet?? Non!!!
    Ext.chart.Chart.CHART_URL = '../extJS/resources/charts.swf';
    
    // Reader
    //========
    var myReader = new Ext.data.XmlReader({
        record: 'Row',
        id: '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'}
        ]
    });

    // Grouping Store
    //================
    var myStore = new Ext.data.GroupingStore({
        // load using HTTP
        url: 'Projects.xml',
        // the return will be XML, so lets set up a reader
        reader: myReader,
        sortInfo: {field: 'due', direction: 'ASC'},
        groupField: 'project'
    });
    myStore.load();
    
    // define a custom summary function
    //==================================
    Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
        return v + (record.data.estimate * record.data.rate);
    };
    
    // utilize custom extension for Group Summary
    //============================================
    var summary = new Ext.ux.grid.GroupSummary();

    // Grid
    //======
    var myGrid = new Ext.grid.EditorGridPanel({
        ds: myStore,
        columns: [
            {
                id: 'description',
                header: 'Task',
                width: 80,
                sortable: true,
                dataIndex: 'description',
                summaryType: 'count',
                hideable: false,
                summaryRenderer: function(v, params, data){
                    return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
                },
                editor: new Ext.form.TextField({
                   allowBlank: false
                })
            },{
                header: 'Project',
                width: 20,
                sortable: true,
                dataIndex: 'project'
            },{
                header: 'Due Date',
                width: 25,
                sortable: true,
                dataIndex: 'due',
                summaryType: 'max',
                renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                editor: new Ext.form.DateField({
                    format: 'm/d/Y'
                })
            },{
                header: 'Estimate',
                width: 20,
                sortable: true,
                dataIndex: 'estimate',
                summaryType: 'sum',
                renderer : function(v){
                    return v +' hours';
                },
                editor: new Ext.form.NumberField({
                   allowBlank: false,
                   allowNegative: false,
                   style: 'text-align:left'
                })
            },{
                header: 'Rate',
                width: 20,
                sortable: true,
                renderer: Ext.util.Format.usMoney,
                dataIndex: 'rate',
                summaryType: 'average',
                editor: new Ext.form.NumberField({
                    allowBlank: false,
                    allowNegative: false,
                    style: 'text-align:left'
                })
            },{
                id: 'cost',
                header: 'Cost',
                width: 20,
                sortable: false,
                groupable: false,
                renderer: function(v, params, record){
                    return Ext.util.Format.usMoney(record.data.estimate * record.data.rate);
                },
                dataIndex: 'cost',
                summaryType: 'totalCost',
                summaryRenderer: Ext.util.Format.usMoney
            }
        ],

        view: new Ext.grid.GroupingView({
            forceFit: true,
            showGroupName: false,
            enableNoGroups: false,
            enableGroupingMenu: false,
            hideGroupedColumn: true
        }),

        plugins: summary,

        tbar : [{
            text: 'Toggle',
            tooltip: 'Toggle the visibility of summary row',
            handler: function(){summary.toggleSummaries();}
        }],

        frame: true,
        width: 800,
        height: 450,
        clicksToEdit: 1,
        collapsible: true,
        animCollapse: false,
        trackMouseOver: false,
        //enableColumnMove: false,
        title: 'Sponsored Projects',
        iconCls: 'icon-grid'
        //renderTo: document.body
    });
    
    // Grid Panel
    //============
    var myGridPanel = new Ext.Panel({    
        title: 'Grouping Grid' ,
        header: true,
        layout:'table',
        items: [myGrid]
    });

    // Pie Panel
    //===========
    var myPiePanel = new Ext.Panel({
        width: 400,
        height: 400,
        title: 'Pie Chart with Legend - Favorite Season',
        items: {
            store: myStore,                    //
            xtype: 'piechart',                //    HOW CAN I HAVE THE GROUPING VALUE IN MY CHART ???    
            dataField: 'totalCost',            //    
            categoryField: 'project'         //
            //extra styles get applied to the chart defaults
            /*extraStyle:
            {
                legend:
                {
                    display: 'bottom',
                    padding: 5,
                    font:
                    {
                        family: 'Tahoma',
                        size: 13
                    }
                }
            } */
        }
    });    
    
    
    // Display!
    //==========
    var viewport = new Ext.Viewport({
        layout:'border',
        items:[{
            region:'center',
            margins:'35 5 5 0',
            layout:'table',
            autoScroll:true,
            items:[{
                baseCls:'x-plain',
                bodyStyle:'padding:5px 0 5px 5px',
                items:[myGridPanel, myPiePanel]
            }]
        }]
    });        
    
});
All is displayed, but of course my pie is bad because i don't know how i can use the totalCost field in my pie...

So, my problem is here :
Code:
    // Pie Panel
    //===========
    var myPiePanel = new Ext.Panel({
        width: 400,
        height: 400,
        title: 'Pie Chart with Legend - Favorite Season',
        items: {
            store: myStore,                    //
            xtype: 'piechart',                //    HOW CAN I HAVE THE  GROUPING VALUE IN MY CHART ???    
            dataField: 'totalCost',            //    
            categoryField: 'project'         //
            //extra styles get applied to the chart defaults
            /*extraStyle:
            {
                legend:
                {
                    display: 'bottom',
                    padding: 5,
                    font:
                    {
                        family: 'Tahoma',
                        size: 13
                    }
                }
            } */
        }
    });
Please, I need your help...