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() {
        this.callParent();
        var chartObjects = [ ];
        var myStore = Ext.getStore(this.getStore());
        this.createSurface();

        /* build config object */
        var me = this;
            var mySprite = Ext.getStore(this.getStore());
            //console.log(this.getStore());
            //simultaneously load the store.
            mySprite.load({
               callback: function(records,op, success) {
                   for(var i=0; i < records.length; i++) {
                      me.surface.add({
                           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!

    Reply
    1. sdrucker Post author

      Try:


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

      Alternately:

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

      Reply

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s