sencha touch2.3 跨域访问

最新推荐文章于 2021-08-11 16:03:11 发布

Freeplay

最新推荐文章于 2021-08-11 16:03:11 发布

阅读量1.7k

点赞数

分类专栏： sencha touch

本文链接：https://blog.youkuaiyun.com/dzy19832006/article/details/28606843

版权

sencha touch 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Sencha Touch框架通过JSONP方式加载远程数据。首先定义了一个包含六个字段的Person模型，接着创建了一个配置了JSONP代理的PersonStore，并指定了服务器端点和数据根属性。最后演示了如何加载数据并处理回调。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考文档

http://docs.sencha.com/touch/2.3.1/#!/api/Ext.data.proxy.JsonP

http://docs.sencha.com/touch/2.3.1/#!/guide/proxies

一、定义model

Ext.define("MOA.model.Person", {
	extend: "Ext.data.Model",
	
	config: {
	    fields: [
	        {name: "id", type: "string"},
	        {name: "psnImg", type: "string"},
	        {name: "psnName", type: "string"},
	        {name: "psnSex", type: "string"},
	        {name: "registrationCode", type: "string"},
	        {name: "tel", type: "string"}
	    ]
	}
});

代码解析：

fields中定义该类的字段和类型

二、定义Store

Ext.define("MOA.store.PersonStore",{
	extend: "Ext.data.Store",
	xtype: "personStore",
	
	config: {
	    model: "MOA.model.Person",
	    proxy: {
	    	type: "jsonp",
	    	url: "http://192.168.168.168:7777",
    		reader: {
                type: 'json',
                rootProperty: 'users'
            }
	    }
	}
});

代码解析：

1、model属性对应上面定义的model类

2、proxy 属性对应代理类

type属性的jsonp为Ext.data.proxy.JsonP类

url属性为请求数据的路径

reader属性中的rootProperty对应server端传回的数据的根属性

server端回传的数据格式如下：

{
    users: [
        {
            id: 1,
            name: "Ed Spencer",
            email: "ed@sencha.com"
        }
    ]
}

三、读取数据

var p = Ext.create('MOA.store.PersonStore');
		p.load({params : {
                           id : ""
                        },
			callback: function(records,operation,success){
				console.log(records);
			}
		});