Ext.setup({
requires: [
'Ext.Panel',
'Ext.MessageBox',
'Ext.Button',
'Ext.ProgressIndicator',
'Ext.form.Panel',
'Ext.field.FileInput'
],
onReady: function() {
var progressIndicator = Ext.create("Ext.ProgressIndicator", {
loadingText: "Uploading: {percent}%"
});
var request = {
url: 'http://sencha-xhr2-demos.herokuapp.com/simple-json.php',
method: 'POST',
xhr2: true,
progress:progressIndicator,
success: function(response) {
var out = Ext.getCmp("output");
response = Ext.JSON.decode(response.responseText, true);
out.setHtml(response.message);
},
failure: function(response) {
var out = Ext.getCmp("output");
out.setHtml(response.message);
}
};
Ext.Viewport.add(progressIndicator);
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"fileinput",
accept:"image/jpeg"
},
{
xtype:"button",
text: "Upload",
ui: 'confirm',
handler: function(){
var input = Ext.Viewport.down("fileinput").input;
var files = input.dom.files;
if (files.length) {
request.binaryData = files[0];
Ext.Ajax.request(request);
}else {
Ext.Msg.alert("Please Select a JPG");
}
}
},
{
xtype: "panel",
id: "output",
scrollable: true,
flex:1
}
]
});
}
});
其实很简单,只要新建一个进度条对象再配置在request的progress属性上就可以了。对于进度条的loadingText属性。
官网的文档上面有说:
Defaults to: {any: 'Loading: {percent}%', upload: 'Uploading: {percent}%', download: 'Downloading: {percent}%'}
我尝试在store load的时候加上进度条,不过没有成功,如果有知道的朋友希望能不吝赐教。