Cannot zoom chart

[titu]

I'm using ExtJS 4.1-rc2 and trying to zoom chart. I'm following the code sample for the 'mask' config and 'select' event from the api doc and here is my code for the chart:

Ext.widget("chart", {
        style : 'background:#fff',
        animate : true,
        shadow : false,
        store : this.chartStore,
        itemId : 'mychart',
        mask : true,
        legend : {
            position : 'bottom'
        },
        listeners : {
            select : {
                fn : function(me, selection) {
                    me.setZoom(selection);
                    me.mask.hide();
                }
            }
        },
        axes : [{
            type : 'Numeric',
            position : 'left',
            fields : this.numericFields,
            title : EasyAdmin.Locale
                    .localize("Usage Level"),
            grid : {
                odd : {
                    opacity : 0.7,
                    fill : '#ddd',
                    stroke : '#bbb',
                    'stroke-width' : 0.5
                }
            }
        }, {
            type : 'Time',
            position : 'bottom',
            dateFormat : EAUtil.getDateFormat(),
            fields : this.timeFields,
            title : EasyAdmin.Locale.localize("Date"),
            label : {
                rotate : {
                    degrees : -90
                }
            },
            grid : true
        }],
        series : this.series
    });

and I'm getting the UI like:

chart.jpg

And when I'm trying to zoom by trying to select any region or clicking then nothing happens! Also not getting any mask element that I can use to select region.