使用Sencha Touch加载本地Json数据
2014-04-29 18:34
309 查看
本例没有采用Sencha的mvc模式。只是一个简单的读取加载本地Json数据示例。
文档结构如下:
![](http://img.blog.csdn.net/20140429172247156?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1aGVuZ2h1aTUyMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
app.js代码如下:
index.html文件如下:
userInfo.json文件如下:
直接打开index.html或者使用服务器方式访问。
显示如下:
文档结构如下:
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或者使用服务器方式访问。
显示如下:
相关文章推荐
- 使用getJSON()方法异步加载JSON格式数据
- Easyui datagrid加载本地Json数据,CGI数据
- Chrome浏览器使用ajax加载本地数据文件问题
- Easyui-tree 加载json数据及loadFilter的使用
- Swift - 本地数据的保存与加载(使用NSCoder将对象保存到.plist文件)
- 新手--网络访问的json数据存储在本地文件夹, 离线使用
- 客户端 使用XML DOM加载json数据的方法
- H5本地存储详细使用教程(localStorage + JSON数据存储应用框架)
- Extjs comboBox的使用,本地的加载数据
- 【jQuery】使用getJSON()方法异步加载JSON格式数据
- zTree使用本地json数据如何确定父子节点关系
- Vue-cli 使用json server在本地模拟请求数据
- 使用getJSON()方法异步加载JSON格式数据
- 关于EASYUI使用dataGrid加载本地JSON文件浏览器不显示问题
- jquery使用EasyUI Tree异步加载JSON数据(生成树)
- 【2】node.js-eCharts柱状图-加载本地json文本数据
- 读取本地磁盘json数据,加载到script标签中
- Swift - 本地数据的保存与加载(使用NSCoder将对象保存到.plist文件)
- EasyUI DataGrid使用Json加载不了数据
- jqGrid初始化加载本地json数据