Load local JSON data using Sencha touch

This example does not use the Sencha MVC pattern. Just a simple read loading local JSON data sample.

The document structure is as follows:

The App.js code is as follows:

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 ">] No.:{id}<br/> name:{name}< Br/> Age:{age}<br/> Home:{url}<br/> Mail:{email}<br/> personal information:{info}</div> ', ' </tpl> '); var Dataview=exT.create (' Ext.dataview ', {store:userstore,itemtpl:usertemplate,listeners:{itemtap:function (OK, index, target, reco    Rd, E, eopts) {alert (Record.get ("name")); }    }}); Ext.Viewport.add (DataView);}});

The index.html file is as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >

The Userinfo.json file is as follows:
{"Success": True, "users": [{"id": "1", "name": "Zhang San", "img": "Images/user.jpg", "Age": "All", "url": "Http://zahngsan.com", "Email": "[email protected]", "info": "A Good Boy"},{"id": "2", "Name": "John Doe", "img": "Images/user.jpg", "Age": "All", "url": " Http://lisi.com "," email ":" [email protected] "," info ":" A Good Boy "},{" id ":" 3 "," Name ":" Harry "," img ":" Images/user.jpg "," Age ":", "url": "Http://henghui.com", "E-mail": "[email protected]", "info": "A Good Boy"},{"id": "4", "Name": "Zhao Liu", "IMG" : "Images/user.jpg", "Age": "All", "url": "http://henghui.com", "email": "[email protected]", "info": "A Good Boy"},{"id": " 5 "," Name ":" Money Seven "," img ":" Images/user.jpg "," Age ":" All "," url ":" http://henghui.com "," email ":" [email protected] "," info " : "A good Boy"}]}
Then configure the default homepage in Web. XML to index.html.
Open index.html directly or use the server to access it.
Shown below: