ExtJs 3.4 动态设置进度条
ExtJs 3.4 set progressbar dynamically
我正在使用 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 个进度条来提供反馈
- 显示文件 %
- 正在显示要上传的剩余文件
所以我尝试在 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 提到的,我可以制作一个 window 并添加一个带有进度条的面板。但我对 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 会更好吗public,或者我可以在上传的东西中访问它们吗?
您应该使用 updateProgress and updateText 方法来动态更改外观。
此外,您应该在 progressBar 中将 renderTo 指定为配置选项:
var upgradeProgressBar = new Ext.ProgressBar({
id: 'pbar1',
renderTo: 'totalProgress'
});
编辑:
根据我在评论中的建议,只需使用 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'}
]
});
我正在使用 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 个进度条来提供反馈
- 显示文件 %
- 正在显示要上传的剩余文件
所以我尝试在 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 提到的,我可以制作一个 window 并添加一个带有进度条的面板。但我对 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 会更好吗public,或者我可以在上传的东西中访问它们吗?
您应该使用 updateProgress and updateText 方法来动态更改外观。
此外,您应该在 progressBar 中将 renderTo 指定为配置选项:
var upgradeProgressBar = new Ext.ProgressBar({
id: 'pbar1',
renderTo: 'totalProgress'
});
编辑:
根据我在评论中的建议,只需使用 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'}
]
});