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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值