PDA

View Full Version : How to make a clickable progressbar



raj91287
19 Aug 2014, 9:36 PM
I want to make a progress bar which on clicking starts the progress.
Is there a way to do it using a progress bar or i can achieve the same functionality using some other elements?

skirtle
19 Aug 2014, 11:24 PM
The progressbar component doesn't have a click event but you can add a click listener to its el.

See the section on Events here:

http://skirtlesden.com/articles/html-and-extjs-components

raj91287
20 Aug 2014, 9:28 PM
/** progressmy.js **/
Ext.onReady(function(){
Ext.define('ProgressBarClickComponent', {
extend: 'Ext.ProgressBar',

initEvents: function() {
this.callParent();

// Listen for click events on the component's el
this.el.on('click', this.onClick, this);

},

onClick: function() {
// Fire a click event on the component
this.fireEvent('click', this);

// Call the handler function if it exists
Ext.callback(this.handler, this);
}
});

var p=new ProgressBarClickComponent({
renderTo: Ext.getBody(),
count: 0,
html: 'Click Me',
width: 300,
height: 30,

handler: function() {
this.count++;
//this.update('Click count: ' + this.count);

this.updateProgress(this.count/100);
}
});

p.wait({
interval: 200,
duration: 5000,
increment: 15,
scope: p,
fn:function() {
//p.update('Done!');

}
});

});