Results 1 to 3 of 3

Thread: How to make a clickable progressbar

  1. #1
    Sencha User
    Join Date
    Aug 2014
    Posts
    2

    Default How to make a clickable progressbar

    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?

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    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...tjs-components

  3. #3
    Sencha User
    Join Date
    Aug 2014
    Posts
    2

    Default My code, Can you tell me where I am going wrong?

    /** 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!');

    }
    });

    });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •