Sencha Touch 学习笔记之----进度条ProgressIndicator

2019独角兽企业重金招聘Python工程师标准>>>

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的时候加上进度条，不过没有成功，如果有知道的朋友希望能不吝赐教。

转载于:https://my.oschina.net/u/259577/blog/374495