Progress bars?

[Mi-e Foame]

I'm trying to figure out how to use a progress bar that will automatically update when values change in the viewmodel. Here is a silly example of what seems like should work:

glu.defModel('derp.main', {
  progress: 0,

  init: function() {
    this.incr();
  },

  incr: function() {
    if (this.progress >= 1) {
      return;
    }

    me = this;
    me.set('progress', me.progress + 0.05);

    setTimeout(function () {
      me.incr();
    }, 1000);
  }
});

glu.defView('derp.main', {
  items: [{
    animate: true,
    border: true,
    xtype: 'progressbar',
    value: '@{progress}'
  }]
});

Ext.onReady(function() {
  glu.viewport('derp.main');
});

When I look at the JS console, I see what I expect:

INFO: [main ?].progress: 0 --> 0.05 glu.js:2462

INFO: [main ?].progress: 0.05 --> 0.1 glu.js:2462

INFO: [main ?].progress: 0.1 --> 0.15000000000000002 glu.js:2462

INFO: [main ?].progress: 0.15000000000000002 --> 0.2 glu.js:2462

INFO: [main ?].progress: 0.2 --> 0.25 glu.js:2462

INFO: [main ?].progress: 0.25 --> 0.3 glu.js:2462

INFO: [main ?].progress: 0.3 --> 0.35 glu.js:2462

INFO: [main ?].progress: 0.35 --> 0.39999999999999997 glu.js:2462

INFO: [main ?].progress: 0.39999999999999997 --> 0.44999999999999996 glu.js:2462

INFO: [main ?].progress: 0.44999999999999996 --> 0.49999999999999994 glu.js:2462

INFO: [main ?].progress: 0.49999999999999994 --> 0.5499999999999999 glu.js:2462

INFO: [main ?].progress: 0.5499999999999999 --> 0.6 glu.js:2462

INFO: [main ?].progress: 0.6 --> 0.65 glu.js:2462

INFO: [main ?].progress: 0.65 --> 0.7000000000000001 glu.js:2462

INFO: [main ?].progress: 0.7000000000000001 --> 0.7500000000000001 glu.js:2462

INFO: [main ?].progress: 0.7500000000000001 --> 0.8000000000000002 glu.js:2462

INFO: [main ?].progress: 0.8000000000000002 --> 0.8500000000000002 glu.js:2462

INFO: [main ?].progress: 0.8500000000000002 --> 0.9000000000000002 glu.js:2462

INFO: [main ?].progress: 0.9000000000000002 --> 0.9500000000000003 glu.js:2462

INFO: [main ?].progress: 0.9500000000000003 --> 1.0000000000000002

However, the progress bar never actually updates in the page. It starts out at 5% but never goes beyond that. What have I missed?

Thanks!

[Ryan Smith]

The problem here is that glujs doesn't have a custom adapter to a progressbar control to properly update it, and Sencha doesn't use standard setter/getter functions in their code.  In this case, glu is going to attempt to go with the standard which would be "setValue".  The real function is called "updateProgress".  This is part of what we intended for glu to fix (the many inconsistencies with extjs controls... much like pressed -> toggle for a button).  

After double checking the code, it looks like its halfway there in the glujs code after all.  Apparently though, they changed the name and its not "progress" xtype anymore... its "progressbar".  From the glujs source code:

glu.regAdapter('progress', {

    extend : 'field',

    valueBindings:{

        setComponentProperty:function (value, oldValue, options, control) {

            control.updateProgress(value);

        }

    }

});

So this will properly configure a "progress" xtype to do the right thing, so we just need to get you a temp fix until we can get a pull request into the main trunk.

glu.regAdapter('progressbar',{

    extend: 'progress'

});

If you add that to your code, you should see the progress bar work.  I'll see what I can do to get that patched in the main github once you confirm that it works.  Or if you'd like to add that to the progress.js adapter and submit your own pull request, then that would be awesome too!  More people helping the project the better :)

Hope that fixes you up :)

-Ryan

--
You received this message because you are subscribed to the Google Groups "GluJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to glujs+un...@googlegroups.com.
To post to this group, send email to gl...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/glujs/9fbe6067-ea44-4246-9a78-92ac77b50de9%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Mi-e Foame]

Ah hah! That's how those adapters work! Awesome stuff.

I made that change locally, and, sure enough, the progress bar started working again. I'll happily submit a pull request, but first I'd like to make sure of something. I don't want to break any backward compatibility, so it seems like I should copy the existing adapter and add a new one specifically for progressbar. What do you think about that?

Thanks again :)

[Mi-e Foame]

derp. Sorry... I just.. yeah. Got too excited and didn't actually use your snippet. I just changed the existing one from progress to progressbar. Disregard that last message ....

(tail between legs)

[Ryan Smith]

Haha!  No worries... I'm just glad it worked!!!

-Ryan

To view this discussion on the web visit https://groups.google.com/d/msgid/glujs/f1d871e8-189a-4286-8bf2-edb14a94d785%40googlegroups.com.

[Mi-e Foame]

Pull request submitted! Whee!!!

https://github.com/CoNarrative/glujs/pull/52