ExtJs 3.4 动态设置进度条

Question

我正在使用 plupload 上传一些文件，我的老板让我更新一些东西，比如有一个进度条而不是一些文本，在我开始上传之前，上传器是这样的：

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();

但现在我想要 2 个进度条来提供反馈

1. 显示文件%
2. 显示要上传的剩余文件

所以我尝试初始化 UploadProgress 中的进度条，但没有成功

然后我尝试将其设置在 App.uploader 上方：

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

并设置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';

但那里也没有运气，然后我得到这样的东西：

编辑： 所以正如@mindparse 提到的，我可以制作一个窗口并在那里添加一个具有进度条的面板。但是我对 extJS 还是很陌生，所以我有以下几点：

        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'
        });

这会引发Uncaught TypeError: Cannot read property 'dom' of null

这是视口：

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) {
        }
    }
});

将 porgressbars 公开会更好，还是我可以在上传的东西中访问它们？

Answer 1

您应该使用updateProgress 和updateText 方法来动态更改外观。

此外，您应该在您的progressBar 中将renderTo 指定为配置选项：

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

编辑：

根据我在 cmets 中的建议，只需使用 Ext.Window，如下所示：

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'}
                ]
            });