report_4.html

{{
    #--------------------------------------------------------------------------
    #
    # The python controller return cfg_store, the configuration of
    # the Ext.data.Array
    #--------------------------------------------------------------------------

    #
    # unique identifier for the DIV block associated to the grid
    #
    divgrid = "grid-%s" % id(cfg_store)

    #
    # The DIV block
    #
    response.write(DIV(_id=divgrid))

    #
    # Export python variables to the javascript
    #
    jsvars = ["cfgStore = %s" % cfg_store,
              "divgrid = '%s'" % divgrid,
              "selector = %s" % selector]

    jsvars = "    var %s;" % ',\n'.join(jsvars)
    response.write(SCRIPT(jsvars), escape=False)

}}
<script>

    var features;

    // instantiate the grid features depending on the user selection
    // not all combinations are valid
    if (selector.grouping && !selector.grouping_summary) {
        features = [{ftype:'grouping'}];

    } else if (selector.grouping || selector.grouping_summary ) {
        features = [{ftype:'groupingsummary'}];
    }

    if (selector.summary && (selector.grouping || selector.grouping_summary)) {
        features.push({ftype:'summary'});
    }

    // instantiate the grid
    Ext.create('App.grid.Panel', {
        plugins: ['pGridExport'],
        store: cfgStore,
        columns: [
            {text: "Controller", dataIndex: 'controller', flex: 0.8},
            {text: "Host", dataIndex: 'host', flex: 1},
            {text: "Collections", dataIndex: 'collections', flex: 1.2},
            {
                text: "Ratio",
                dataIndex: 'ratio',
                flex: 0.5,
                align: 'right',
                summaryType: 'sum'
            }
        ],
        features: features,
        forceFit: true,
        //hideHeaders: true,
        padding: "10 40 20 60",
        renderTo: divgrid
    });

</script>