ExtJs taskrunner using Slider

Question

I am trying to load a chart/grid which should change the data displayed after a certain time interval .I have used an ExtJs TaskRunner, which reloads the store(Project store that fetched data using a proxy ajax type call) after a specific time interval that the user sets from an ExtJs slider .

 var runner = new Ext.util.TaskRunner(),
        task = runner.start({
            run: function() {
                store.reload();
            },
            interval: function(){
             return Ext.getCmp('myslider').value();
             }
        });

    runner.stop();
}

Here is my Fiddle :

 https://fiddle.sencha.com/#fiddle/p49

The interval given from the slider is not setting to the Runner . How do I give value from slider to the Runner and is this a right approach to show live data on a dashboard, with the graphs changing whenever the data from the backend changes

Answer 1

For setting the new runner with new timer you need to destroy the old one in the slider's listener some thing like this.

,
    listeners:{
        changecomplete: function( me, newValue, thumb, eOpts ){
            console.log(newValue)
            var val = newValue*1000;
            //destroy the runner
            runner.destroy()
            //make a new runner and task and set the new slider time
            runner = new Ext.util.TaskRunner();
            task = runner.start({
             run: myRun,
             interval: val
            });
        }
    },

Full running code here: https://fiddle.sencha.com/#fiddle/p57