Getting Started with the Sencha Charts 2 DrawComponent

One of my Sencha Touch 2 students asked about extending the types of charts that ship with Sencha Touch Charts 2 (currently in beta) – so I helped her cobble together this little proof-of-concept:

Ext.define("Charts.view.MyDrawComponent", {
    xtype: 'mydrawcomponent',
    extend: 'Ext.draw.Component',
    requires: ['Ext.Container'],
    config: {
        viewBox: false,
        store: 'SampleStore'
    initialize: function() {
        var chartObjects = [ ];
        var myStore = Ext.getStore(this.getStore());

        /* build config object */
        var me = this;
            var mySprite = Ext.getStore(this.getStore());
            //simultaneously load the store.
               callback: function(records,op, success) {
                   for(var i=0; i < records.length; i++) {
                           type: 'circle',
                           fill: '#79BB3F',
                           radius: mySprite.getAt(i).get('wasteml'),
                           x: 100+i*100,
                           y: 100



2 thoughts on “Getting Started with the Sencha Charts 2 DrawComponent

  1. Mridul

    Hi, i am doing a similar exercise. I want to load a circle in a custom view class. Bing new to sencha, I have learnt how to add different components to the classes for example carousel vbox etc but adding a circle is a nightmare.

    Can you please help me out by telling me how to add a circle (or any shape) to sencha custom view class. I have tried adding it by extending the circle component as u have done and also by defining a circle variable in the class in which I intend to load this but all these efforts went useless.

    Please help!

    1. sdrucker Post author


      new Ext.draw.Component({
      items: [{
      type: 'circle',
      cx: 100,
      cy: 100,
      r: 25,
      fillStyle: 'blue'


      var cmp = Ext.ComponentQuery.query('draw')[0];
      var surface = cmp.getSurface();
      type: 'circle',
      cx: 100,
      cy: 100,
      r: 25,
      fillStyle: 'blue'


Leave a Reply to Mridul Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s