ExtJs 3.4 set progressbar dynamically

Question

I'm using plupload to upload some files, my boss asked me to update some things like having a progressbar instead off some text, before I started the uploader was something like this:

App.uploader = new plupload.Uploader({
    // code omitted

    url: "actions/Upload.aspx",

    init: {
        //ownerwindow
        Error: function (up, err) {
            // code omitted
        },

        PostInit: function () {
            // code omitted
        },

        UploadProgress: function (up, file) {
            var p = up.ownerwindow;
            var totalpercent = ((Math.round(up.total.loaded / up.total.size * 100)))
            p.getEl().mask('Uploading: <br/>Total: ' + totalpercent + '%<br/>File: ' + file.percent + '%');
        },

        FileUploaded: function (up, file, response) {
            // code omitted
        },

        UploadComplete: function (up, response) {
            // code omitted
        },

        FilesAdded: function (up, files) {
            // code omitted
        }
    }
});

App.uploader.init();

but now I want 2 progressbars to provide the feedback

1. showing file %
2. showing remaining files to upload

So I tried initializing the progressbars inside the UploadProgress but that didn't work

then I tried setting it just above the App.uploader:

var upgradeProgressBar = new Ext.ProgressBar({
    id: 'pbar1'
});

and setting the values in the UploadProgress:

p.getEl().mask('<div id="upload"><div id="fileProgress"></div><div id="totalProgress"></div></div>');

upgradeProgressBar.width = 50 / totalpercent;
upgradeProgressBar.text = up.total.uploaded + ' / ' + up.files.length + ' ( ' + up.total.failed + ' failed )';
upgradeProgressBar.renderTo = 'totalProgress';

but no luck there either, then I get something like this:

EDIT: So as @mindparse mentioned, I could make a window and there add a panel that has the progressbars. But I am still new to the extJS thing so I have the following:

        win = new Ext.Window({
            applyTo: 'viewport',
            layout: 'fit',
            width: 500,
            height: 300,
            closeAction: 'hide',
            plain: true,

            items: new Ext.Panel({
                title: 'Upload Progress',
                preventBodyReset: true,
                width: 400,
                html: '<div id="upload"><div id="fileProgress"></div><div id="totalProgress"></div></div>'
            })
        });

        var upgradeProgressBar1 = new Ext.ProgressBar({
            id: 'pbar1',
            renderTo: 'fileProgress'
        });
        var upgradeProgressBar2 = new Ext.ProgressBar({
            id: 'pbar2',
            renderTo: 'totalProgress'
        });

this throws an Uncaught TypeError: Cannot read property 'dom' of null

this is the viewport:

App.Viewport = new Ext.Viewport({
    layout: 'border',
    id: 'viewport',
    border: true,
    items: [new App.regions.north.Panel(), { xtype: 'regionswestpanel', margins: '0 0 5 5' }, { xtype: 'regionscenterpanel', margins: '0 5 5 0' }],
    listeners: {
        afterrender: function (viewport) {
        }
    }
});

and Would it be better to make the porgressbars public, or can I access them in my upload thingy?

Answer 1

You should be using the updateProgress and updateText methods to dynamically change the appearance.

Also, you should specify renderTo as a config option in your progressBar:

var upgradeProgressBar = new Ext.ProgressBar({
    id: 'pbar1',
    renderTo: 'totalProgress'
});

EDIT:

As per my suggestion in the comments, just use an Ext.Window, something like this:

var win = new Ext.Window({
                layout: 'auto',
                title: 'Upload Progress',
                width: 500, 
                closeAction: 'hide',
                modal: true,
                padding: 5,
                items: [
                    {xtype:'progress', id: 'pbar1'},
                    {xtype:'progress', id: 'pbar2'}
                ]
            });