Sencha Touch 學習筆記之----進度條ProgressIndicator

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的時候加上進度條，不過沒有成功，若是有知道的朋友但願能不吝賜教。