Is there a way to mask chart while loading? LineChart has event 'afterrender', store has 'load' but it is not what i need. I see sufficient delay between them and final cha开发者_运维问答rt rendering. tnx

Env: extjs 3.3.1. flash

  var chart = new Ext.chart.LineChart({
                    id: 'chart1',
                    store: store,
                    xField: 'name',
                    yField: 'visits',
                  listeners: {
                    'afterrender': function() {
                      Ext.getCmp('chart1').getEl().unmask();
                    }
                }
            });

Why the heck would you use getCmp in an event of that Component? The function has arguments:

listeners: {
    afterrender: function(chart) {
        chart.getEl().unmask();
    }
}

Also, be mindful of memory leaks as this would keep the listener on this chart until it gets destroyed but it only renders once

listeners : {
    afterrender : {
        single : true,
        fn     : function(chart) {
            chart.getEl().unmask();
        }
    }
}

With single = true, it will remove itself after the first firing of the event. You can also put delay and pass in a number (in milliseconds) to delay the firing, buffer (not for afterrender) and pass in a number (in milliseconds) and all the same events within the number of milliseconds will be put into one event firing, scope to change the scope of the function. Some others but those are the top 4 options.

Try either the render or beforerender event hooks.

I think this will solve your problem

store.load({
         scope: this,
        callback: function(records, operation, success) {

 Ext.getCmp('chart1').getEl().unmask();

}
});

else you can use the activate event of the chart to unmask it.