Sencha 读取远程JSON数据并显示

/**
 * @author Changweihua
 */
Ext.application({
    name : 'Chapter5',
    launch : function() {
        Ext.define('User', {
            extend : 'Ext.data.Model',
            config : {
                fields : ['name', 'sex', 'password', {
                    name : 'age',
                    type : 'int'
                }, 'email', 'url', 'memo'],
                validations : [{
                    type : 'presence',
                    field : 'name',
                    message : '必须输入用户名'
                }, {
                    type : 'exclusion',
                    field : 'name',
                    list : ['admin', '管理员'],
                    message : '不能使用该用户名'
                }, {
                    type : 'inclusion',
                    field : 'sex',
                    list : ['male', 'female'],
                    message : '必须选择姓名'
                }, {
                    type : 'presence',
                    field : 'password',
                    message : '必须输入密码'
                }, {
                    type : 'length',
                    field : 'password',
                    message : '必须输入6位以上的密码'
                }, {
                    type : 'length',
                    field : 'age',
                    message : '必须输入有效的年龄'
                }, {
                    type : 'format',
                    field : 'age',
                    matcher : /^\+?[1-9][0-9]$/,
                    message : '必须输入有效的年龄'
                }, {
                    type : 'email',
                    field : 'email',
                    message : '必须输入有效的邮件地址'
                }, {
                    type : 'format',
                    field : 'url',
                    matcher : /^http:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/,
                    message : '必须输入有效的网址'
                }]
            }
        });
        var formPanel = Ext.create('Ext.form.Panel', {
            id : 'formPanel',
            scrollable : 'vertical',
            items : [{
                xtype : 'fieldset',
                title : '用户信息',
                instructions : '填写完整的用户信息',
                defaults : {
                },
                items : [{
                    xtype : 'textfield',
                    label : '用户名',
                    name : 'name',
                    clearIcon : true,
                    required : true,
                    placeHolder : '请输入用户名'
                }, {
                    xtype : 'fieldset',
                    title : '性别',
                    defaults : {
                        xtype : 'radiofield'
                    },
                    items : [{
                        label : '男',
                        name : 'sex',
                        checked : true,
                        value : 'male'
                    }, {
                        label : '女',
                        name : 'sex',
                        value : 'female'
                    }]
                }, {
                    xtype : 'passwordfield',
                    label : '密码',
                    name : 'password',
                    clearIcon : true,
                    required : true,
                    placeHolder : '请输入密码'
                }, {
                    xtype : 'spinnerfield',
                    label : '年龄',
                    name : 'age',
                    required : true,
                    stepValue : 1,
                    minValue : 18,
                    maxValue : 30
                }, {
                    xtype : 'emailfield',
                    label : '邮箱',
                    name : 'email',
                    placeHolder : '请输入有效的电子邮件地址'
                }, {
                    xtype : 'urlfield',
                    label : '个人网址',
                    placeHolder : '请输入有效的网址',
                    name : 'url'
                }, {
                    xtype : 'textareafield',
                    label : '个人简介',
                    placeHolder : '请输入1000字以内的个人简介',
                    name : 'memo'
                }]
            }, {
                xtype : 'panel',
                defaults : {
                    xtype : 'button'
                },
                layout : {
                    type : 'hbox',
                    pack : 'end',
                },
                items : [{
                    text : '装载远程数据',
                    ui : 'action',
                    handler : function() {
                       var loader  = Ext.create('Ext.LoadMask', {
                           message:'...',
                           showAnimation:'slideIn',
                           renderTo:Ext.fly('formPanel')
                       });
                       loader.show(true);
                        Ext.Ajax.request({
                            url : 'chang.json',
                            scope : this,
                            callback : function(opts, success, resp) {
                               loader.hide();
                            },
                            success : function(resp) {
                                //直接返回JSON格式文件,必须带双引号
                                 var obj = Ext.util.JSON.decode(resp.responseText);
                                 var msg = obj.data[0];
                                 var user = Ext.create('User', {
                                     'name' : msg.name,
                                     'sex' : msg.sex,
                                     'password' : msg.password,
                                     'age' : msg.age,
                                     'email' : msg.email,
                                     'url' : msg.url,
                                     'memo' : msg.memo
                                 });
                                 formPanel.setRecord(user);
                                 Ext.Msg.alert('成功装载远程数据');
                            },
                            failure : function() {
                                Ext.Msg.alert('装载远程数据失败');
                            }
                        });
                    }
                }, {
                    text : '提交',
                    ui : 'action',
                    handler : function() {
                        var user = Ext.create('User', formPanel.getValues());
                        var errors = user.validate();
                        if (errors.isValid()) {
                        } else {
                            var msg = '';
                            Ext.each(errors.items, function(error) {
                                msg += error.getMessage() + '<br />';
                            });
                            Ext.Msg.alert('验证失败', msg);
                        }
                    }
                }, {
                    text : '重置表单',
                    ui : 'normal',
                    handler : function() {
                        formPanel.reset();
                    }
                }]
            }]
        });
        Ext.Viewport.add(formPanel);
    }
});

{
    "success":true,
    "data":[{
        "name":"常伟华",
        "sex":"male",
        "password":"123456",
        "age":23,
        "email":"changweihua@outlook.com",
        "url":"http://www.cmono.net",
        "memo":"暂缺"
    }]
}

点击查看原图点击查看原图

知识共享许可协议
《Sencha 读取远程JSON数据并显示》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     185.20ms