使用Sencha Touch加载本地Json数据

本例没有采用Sencha的mvc模式。只是一个简单的读取加载本地Json数据示例。

文档结构如下：

app.js代码如下：

Ext.require(['Ext.form.Panel','Ext.data.Store','Ext.data.reader.Json','Ext.dataview.DataView']);
Ext.application({name:'MyApp',icon:'images/icon.png',glossOnIcon:false,phoneStarupScreen:'images/starUp.png',tabletStartupScreen:'images/tablet.png',launch:function(){Ext.define('User',{extend:'Ext.data.Model',config:{fields:[{name:'id',type:'string'},{name:'name',type:'string'},{name:'img',type:'string'},{name:'age',type:'string'},{name:'url',type:'string'},{name:'email',type:'string'},{name:'info',type:'string'}]}});var userStore=Ext.create('Ext.data.Store',{model:'User',autoLoad:true,proxy:{type:'ajax',url:'userInfo.json',reader:{type:'json',rootProperty:'users'}}});var userTemplate = new Ext.XTemplate('<tpl for=".">','<div class="user_img"><img src="{img}" width="50" height="50" />编号：{id}<br/>姓名：{name}<br/>年龄：{age}<br/>主页：{url}<br/>邮件：{email}<br/>个人信息:{info}</div>','</tpl>');var dataview=Ext.create('Ext.DataView',{store:userStore,itemTpl:userTemplate,listeners:{itemtap:function( ok, index, target, record, e, eOpts){alert(record.get("name"));}}});Ext.Viewport.add(dataview);}
});

index.html文件如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>index.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="sencha-touch.css"><script type="text/javascript" src="sencha-touch-all-debug.js"></script><script type="text/javascript" src="app.js"></script></head><body></body>
</html>

userInfo.json文件如下：

{
"success":true,
"users":[{"id":"1","name":"张三","img":"images/user.jpg","age":"23","url":"http://zahngsan.com","email":"waj@163.com","info":"a good boy"},{"id":"2","name":"李四","img":"images/user.jpg","age":"23","url":"http://lisi.com","email":"waj@163.com","info":"a good boy"},{"id":"3","name":"王五","img":"images/user.jpg","age":"23","url":"http://henghui.com","email":"waj@163.com","info":"a good boy"},{"id":"4","name":"赵六","img":"images/user.jpg","age":"23","url":"http://henghui.com","email":"waj@163.com","info":"a good boy"},{"id":"5","name":"钱七","img":"images/user.jpg","age":"23","url":"http://henghui.com","email":"waj@163.com","info":"a good boy"}]
}

然后再web.xml中配置好默认首页为index.html。

直接打开index.html或者使用服务器方式访问。

显示如下：

使用Sencha Touch加载本地Json数据相关推荐

Echarts 异步请求不能加载本地JSON数据解决方案，以及Http-Server安装与使用
文章目录一.前言二.分析&解决方案三.Http-Server简介&安装方法四.启动http本地服务方法五.附:Http-Server可选配置一.前言最近学习eharts制 ...
Jquery中使用JsonP加载本地json文件解决跨域问题
场景 jquery中直接请求本地json文件时会提示跨域问题. Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获 ...
js修改本地json文件_Flutter加载本地JSON文件教程建议收藏
今天农村老家的天气不是很好而且外面还下雨了,每天只能坐在老家打开电脑,看看文章,写写文章今天我给大家带来一篇Flutter加载本地JSON文件教程本头条核心宗旨欢迎来到「技术刚刚好」作者,「 ...
加载本地json文件,并利用批处理调用Chrome显示html
加载本地json文件 1.加载本地json文件为了调试保存在本地的json数据,需要进行读入.一般使用jQuery来进行,但需要对浏览器进行一点设置. Chrome浏览器中有一个启动选项--allo ...
解决mysql load data加载本地null数据，表里出现0的情况
解决mysql load data加载本地null数据,表里出现0的情况问题说明: sql执行语句如下代码块: ---- 欢迎讨论沟通 ---- 问题说明: 本人在使用mysql加载本地数据过程中, ...
第18.1节 OE3.1实例-加载本地瓦片数据
致谢感谢网友提出这个问题.大家有问题也可以在评论区提出,有问必有答.如果涉及商业需求,需要较完整/详尽的工程,可以联系作者133-2459-8743. 问题描述网友提出要做一个基于osgearth ...
使用Sencha Touch加载服务器端数据。
本实例演示了Sencha Touch读取服务器端发来的Json数据. 文档结构如下: app.js代码如下: Ext.require(['Ext.form.Panel','Ext.data.Store ...
easyUI +datagirdview加载本地json的方式笔记
第一种加载代码里面的json数据,json数据就放到script里面 <head><meta charset="UTF-8"><title>Ba ...
easyui使用ajax获取json文件,easyui 加载本地json 文件的方法
1.1使用内置的Camara应用程序捕捉图像一: Camara应用程序包含的意图过滤器发布时去掉 debug 和提醒日志,简单无侵入在 proguard 文件中加入下面代码,让发布时去掉 de ...

使用Sencha Touch加载本地Json数据

使用Sencha Touch加载本地Json数据相关推荐

最新文章

热门文章