Question

I am attempting to alter the value of a progress bar in ExtJS,

I render the progress bar like this:

var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:'save-form.php',
        frame:true,
        title: 'myAPI',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        defaultType: 'textarea',

        items: [{
                fieldLabel: 'Record ',
                name: 'first',
                id: 'record1',
                allowBlank:false
            },{
                fieldLabel: 'Last Name',
                name: 'last'
            },{
                fieldLabel: 'Company',
                name: 'company'
            }, {
                xtype: 'dataview',
                name: 'email',
                vtype:'email'
            },{
                xtype: 'progress',
                name: 'mybar',
                id: 'mybar',
                value: bar
            }
        ],
        buttons: [{
            text: 'Start',
            handler: clicked
        },{
            text: 'Cancel'
        }]     
    });
    simple.render(document.body);

And I am trying to update the progress bar like this:

var mybar = Ext.get('mybar').updateProgress(bar);

But I’m getting this in chrome:

Uncaught TypeError: Object [object Object] has no method ‘updateProgress’

Thanks!

Answer 1

http://dev.sencha.com/deploy/dev/docs/?class=Ext

According to the documentation:

get( Mixed el ) : Element
Retrieves Ext.Element objects. This method does not retrieve Components. This method retrieves Ext.Element objects wh…
Retrieves Ext.Element objects.

This method does not retrieve Components. This method retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by its ID, use Ext.ComponentMgr.get.

Uses simple caching to consistently return the same object. Automatically fixes if an object was recreated with the same id via AJAX or DOM.

—

So, simply use Ext.ComponentMgr.get(‘mybar’).updateProgress

In addition, the updateProgress function is defined as follows:

updateProgress( [Float value], [String text], [Boolean animate] ) : Ext.ProgressBar