1. #1
    Sencha Premium Member MaximGB's Avatar
    Join Date
    Jun 2007
    Location
    Moscow, Russia
    Posts
    506
    Vote Rating
    5
    MaximGB is on a distinguished road

      0  

    Default Progress bar extension.

    Progress bar extension.


    Hi, all.

    This extension is a very simple realization of progress bar component.
    There are two classes:
    Ext.ux.ProgressBar, which inherits from Ext.BoxComponent and
    Ext.ux.ProgressBarItem, which inherits from Ext.Toolbar.Item and delegates to Ext.ux.ProgressBar.

    The screenshoot and extension package are attached to the message. The api is simple but if anyone will have questions, I'll do my best to answer.
    Attached Images
    Attached Files
    Use the force - read the source.

  2. #2
    Sencha Premium Member MaximGB's Avatar
    Join Date
    Jun 2007
    Location
    Moscow, Russia
    Posts
    506
    Vote Rating
    5
    MaximGB is on a distinguished road

      0  

    Default IE style bug fixed

    IE style bug fixed


    IE Style bugfix.
    Attached Files
    Use the force - read the source.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    FYI, there is an official Ext ProgressBar in 2.0 for anyone who has SVN access.

  4. #4
    Sencha Premium Member MaximGB's Avatar
    Join Date
    Jun 2007
    Location
    Moscow, Russia
    Posts
    506
    Vote Rating
    5
    MaximGB is on a distinguished road

      0  

    Default


    Yes, I know but I am not in that list yet.
    Use the force - read the source.

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    No problem -- just mentioning it in case anyone else reads this and is looking for the same thing in 2.0 . Your version should still be quite useful for anyone on 1.1.

  6. #6
    Ext User
    Join Date
    Aug 2007
    Posts
    18
    Vote Rating
    0
    nonamebrand is on a distinguished road

      0  

    Default


    This looks great, I am experimenting with Ext 1.1 to see what its all about.

    Do you have a sample of how one would use this progress bar?
    I can't seem to get it to work, I guess I am pretty dumb when it comes to Ext things right now!

    I have :

    progress = new Ext.ux.ProgressBar( {id:'statusbar.progress'} );
    progress.setValue(12);
    progress.render( Ext.get('statusbar.progress') ) ;
    <span id="statusbar.progress" style="width:200px;height:24px"></span>
    But nothing happens?

  7. #7
    Sencha Premium Member MaximGB's Avatar
    Join Date
    Jun 2007
    Location
    Moscow, Russia
    Posts
    506
    Vote Rating
    5
    MaximGB is on a distinguished road

      0  

    Default


    Try to change span to div, or td any block element will do.
    Also there is a bug in getPercentValue() method, try to replace it with following
    Code:
      getPercentValue : function(value)
      {
        value = value || this.value;
        var gap = this.max - this.min;
        value -= this.min;
        return Math.round(value * 100 / gap);
      },
    Or download my UploadDialog extension, the updated progress bar extension is included in the package
    Use the force - read the source.

  8. #8
    Ext User
    Join Date
    Aug 2007
    Posts
    18
    Vote Rating
    0
    nonamebrand is on a distinguished road

      0  

    Default


    Works great now thanks!!
    Will be sure to check out the UploadDialog extension as well!

  9. #9
    Ext User
    Join Date
    Aug 2007
    Posts
    60
    Vote Rating
    0
    mscdex is on a distinguished road

      0  

    Default


    I noticed there is a ProgressBarItem class in the .js file as well, can you post an example on how to add a ProgressBarItem to a toolbar dynamically? I know you just add an instance of it to the toolbar, but I'm not sure how to go about rendering it correctly after it's dynamically added to the toolbar via the toolbar's .add() method.

  10. #10
    Sencha Premium Member MaximGB's Avatar
    Join Date
    Jun 2007
    Location
    Moscow, Russia
    Posts
    506
    Vote Rating
    5
    MaximGB is on a distinguished road

      0  

    Default


    Use it like any other toolbar item, it will be rendered by the toolbar automaticaly.
    Code:
    var tb = new Ext.Toolbar('container_id');
    var progress_bar = tb.addItem(new Ext.ux.ProgressBarItem({value: 35}));
    Please notice that file posted in the thread first message is outdated and contains bugs, the last version of the Ext.ux.ProgressBar is included in the another my extension Ext.ux.UploadDialog
    Use the force - read the source.