1. #1
    Sencha User
    Join Date
    Sep 2009
    Posts
    27
    Vote Rating
    1
    Joel is on a distinguished road

      1  

    Default Progress Bar

    Progress Bar


    I needed a progress bar for Sencha Touch (just like the Ext one) but couldn't seem to find one. Attached is my port of the Ext ProgressBar into Sencha Touch. Use it just like you would the Ext one. Eg:
    Code:
    var p = new Ext.MessageBox({progress: true});
    p.show();
    p.updateProgress(.7, 'Importing 7/10');
    p.hide();
    Just like the Ext one, you need to close the progress bar yourself. I've only tested it on iPhone, but Android should work.
    Attached Files

  2. #2
    Sencha User
    Join Date
    Sep 2009
    Posts
    27
    Vote Rating
    1
    Joel is on a distinguished road

      0  

    Default Messed up the css sorry.

    Messed up the css sorry.


    If you are using this please change the css file to change all the right radius' from 8px to 20px. I made it all bigger for the iPhone, but forgot to fix the right hand side. Sorry!

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    395
    Vote Rating
    6
    gkatz is on a distinguished road

      0  

    Default


    Joel;
    thanks for sharing.
    can you put a demo page up?
    also, was the plugin reuploaded with the proper css?

  4. #4
    Sencha User
    Join Date
    Sep 2009
    Posts
    27
    Vote Rating
    1
    Joel is on a distinguished road

      0  

    Default


    I'll put up a demo page tonight. I can't seem to change the attached files (the 'Go Advanced' button on editing the posts doesn't work). So I've attached the corrected version here.
    Attached Files

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    5
    Vote Rating
    0
    hokusmokus is on a distinguished road

      0  

    Default


    Hi Joel,

    I only started coding Sencha Touch a couple days ago, but I would recomend:

    your code:

    Ext.ProgressBar = Ext.extend(Ext.BoxComponent, {

    recommend:

    Ext.ux.ProgressBar = Ext.extend(Ext.BoxComponent, {

    Also, I recommend that you register an xtype:


    Ext.reg('progressbar', Ext.ux.ProgressBar);
    I hope this helps.

    Thanks

  6. #6
    Sencha User
    Join Date
    Sep 2009
    Posts
    27
    Vote Rating
    1
    Joel is on a distinguished road

      0  

    Default


    You could put it in Ext.ux (and that's probably best-practice), but a progress bar really should be part of the core, and since I grabbed it from the Ext code-base I left it as Ext. Your choice.

    You could register a type, but in this instance I'm just using it as part of the MessageBox and not intending to use it anywhere else. So the registration is not neccessary. But, again, it's your choice and if you wanted to use it elsewhere (and you needed it available through xtype) you could register it.

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    5
    Vote Rating
    0
    hokusmokus is on a distinguished road

      0  

    Default


    Thanks for quick response.. i see your points.

    I have a quick question, can you please explain this function definition:

    updateProgress : function (value, text, animate)


    I assume that 'value' is from 0-100? so if i put 100 the progressbar will be filled?

    'text' is some status that will be displayed below progressbar?

    'animate' is a boolean, stipulates to animate or not? not quite sure i understand..

    your help is greatly apreciated,

    thank you

  8. #8
    Sencha User
    Join Date
    Dec 2011
    Posts
    5
    Vote Rating
    0
    hokusmokus is on a distinguished road

      0  

    Default


    Nevermind, i got it working.. i understand.. wooohoo!

    nice progress bar!

  9. #9
    Sencha User
    Join Date
    Sep 2009
    Posts
    27
    Vote Rating
    1
    Joel is on a distinguished road

      0  

    Default


    Sorry, I was a bit lazy and didn't bring the comments across from Ext. I'll update it tonight with the comments in case anyone else has the same problem.

    Looks like you worked it out, but for anyone else:
    - value: The percentage number the bar should be filled up by (a number between 0 and 1. Eg: for half filled use 0.5)
    - text: The text to overlay on the bar. I usually use something like '1/10 Imported'. You need to construct it yourself
    - animate: I don't think this is used (a hang over from Ext). On Ext it animates the moving of the bar. On Sencha it's ignored. I might see if this affects anything and port it across to if required.

    -Joel

  10. #10
    Sencha User Sameer Khan's Avatar
    Join Date
    Oct 2011
    Location
    Bangalore, India
    Posts
    113
    Vote Rating
    0
    Sameer Khan is on a distinguished road

      0  

    Default How to use Progress bar in my application

    How to use Progress bar in my application


    I am new to sencha touch..Right now in my application i am using Mask only...But our requirement is, to use progress bar..But in sencha touch 1 Api upto now there is no such class for progressbar...

    Plz provide some steps to use your Progress bar...


    Thanks in Advance...
    Sameer Khan