从ExtJs4升级到ExtJs5：GroupedColumn图表不起作用

Question

I am new to Extjs5. I am upgrading extJs4 to ExtJs 5. I am trying to implement a groupedColumn chart but no data shows up only the axises are visible. Even I am not getting any error. My code is as follows:

Ext.define('Result', {
extend: 'Ext.data.Model',
fields: [
    { name: 'state', type: 'string', mapping:0 },
    { name: 'product', type: 'string', mapping:1 },
    { name: 'quantity', type: 'int', mapping:2 }
]
});
var store = Ext.create('Ext.data.ArrayStore', {
model: 'Result',
groupField: 'state',
data: [
    ['MO','Product 1',50],
    ['MO','Product 2',75],
    ['MO','Product 3',25],
    ['MO','Product 4',125],
    ['CA','Product 1',50],
    ['CA','Product 2',100],
    ['WY','Product 1',250],
    ['WY','Product 2',25],
    ['WY','Product 3',125],
    ['WY','Product 4',175]
]    
});
Ext.define('Ext.chart.series.AutoGroupedColumn', {
extend: 'Ext.chart.series.Bar',
type: 'autogroupedcolumn',
alias: 'series.autogroupedcolumn',
gField: null,
constructor: function( config ) {
    this.callParent( arguments );
    // apply any additional config supplied for this extender
    Ext.apply( this, config );
    var me = this,
        store = me.chart.getStore(),
        // get groups from store (make sure store is grouped)
        groups = store.isGrouped() ? store.getGroups().items : [],
        // collect all unique values for the new grouping field
        groupers = store.collect( me.gField ),
        // blank array to hold our new field definitions (based on groupers collected from store)
        cmpFields = [];
    // first off, we want the xField to be a part of our new Model definition, so add it first
    cmpFields.push( {name: me.xField } );
    // now loop over the groupers (unique values from our store which match the gField)
   /* for( var i in groupers ) {
        // for each value, add a field definition...this will give us the flat, in-record column for each group 
        cmpFields.push( { name: groupers[i], type: 'int' } );
    }*/

    for (var i = 0; i < groupers.length; i++) {
        var name = groupers[i];
        cmpFields.push({name:name,type:'number'});
    }

    // let's create a new Model definition, based on what we determined above
    Ext.define('GroupedResult', {
        extend: 'Ext.data.Model',
        fields: cmpFields
    });
    // now create a new store using our new model
    var newStore = Ext.create('Ext.data.Store', {
        model: 'GroupedResult'
    });
     // now for the money-maker; loop over the current groups in our store
    for( var i = 0; i < groups.length; i++ ) {
        // get a sample model from the group
        var curModel = groups[ i ].items[ 0 ]; 
        // create a new instance of our new Model
        var newModel = Ext.create('GroupedResult');
        // set the property in the model that corresponds to our xField config
        newModel.set( me.xField, curModel.get( me.xField ) );
        // now loop over each of the records within the old store's current group
        for( var x = 0; x < groups[ i ].items.length; x++) {
            // get the record
            var dataModel = groups[ i ].items[ x ];
            // get the property and value that correspond to gField AND yField
            var dataProperty = dataModel.get( me.gField );
            var dataValue = dataModel.get( me.yField );
            // update the value for the property in the Model instance
            newModel.set( dataProperty, dataValue );
            // add the Model instance to the new Store
            newStore.add( newModel );
        }
    }
    // now we have to fix the axes so they work
    // for each axes...
    me.chart.axes.every( function( item, index, len ) {
        // if array of fields
        if( typeof item.getFields()=='object' ) {
            // loop over the axis' fields
            for( var i in item.fields ) {
                // if the field matches the yField config, remove the old field and replace with the grouping fields
                if( item.getFields(i)==me.yField ) {
                   Ext.Array.erase( item.getFields(), i, 1 );
                   Ext.Array.insert( item.getFields(), i, groupers );
                   break;
                }
            } 
        }
        // if simple string
        else {
            // if field matches the yField config, overwrite with grouping fields (string or array)
            if( item.getFields()==me.yField ) {
                item.setFields(groupers);
            }
        }
    });
    // set series fields and yField config to the new groupers
    me.fields,me.yField = groupers;
    // update chart's store config, and re-bind the store
    me.chart.store = newStore;
    me.chart.bindStore( me.chart.store, true );
    // done!
}
})

Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
legend: {
  position: 'right'  
},
axes: [
    {
        type: 'numeric',
        position: 'left',
        fields: ['quantity'],
        label: {
            renderer: Ext.util.Format.numberRenderer('0,0')
        },
        title: 'Quantity',
        grid: true,
        minimum: 0
    },
    {
        type: 'category',
        position: 'bottom',
        fields: ['state'],
        title: 'State'
    }
],
series: [
    {
        type: 'autogroupedcolumn',
        axis: 'left',
        highlight: true,
        xField: 'state',
        yField: 'quantity',
        gField: 'product'
    }
]
});       

I have used Ext.chart.series.Bar in place of Ext.chart.series.Column as Ext.chart.series.Column no more valid in ExtJs 5. I also have made other minor essential changes required to make my code compatible to ExtJs 5. You can also check this example on https://fiddle.sencha.com/#fiddle/hvk . I have already spent 3 days on it. Please help!! Thanks in advance.

Answer 1

@Samir, If you want a Grouped Chart which is non-stacked use stacked: false property in series. Modify the code of @MonicaOlejniczak as:

legend :{
   docked: right
}
series: {
  .......
  ........
  stacked: false,
}

This should solve your problem.