首頁 > 開發者 > 網站開發

使用Sencha Touch載入本地Json資料

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style   blog   http   java   使用   os   

本例沒有採用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":"[email protected]","info":"a good boy"},{"id":"2","name":"李四","img":"images/user.jpg","age":"23","url":"http://lisi.com","email":"[email protected]","info":"a good boy"},{"id":"3","name":"王五","img":"images/user.jpg","age":"23","url":"http://henghui.com","email":"[email protected]","info":"a good boy"},{"id":"4","name":"趙六","img":"images/user.jpg","age":"23","url":"http://henghui.com","email":"[email protected]","info":"a good boy"},{"id":"5","name":"錢七","img":"images/user.jpg","age":"23","url":"http://henghui.com","email":"[email protected]","info":"a good boy"}]}
然後再web.xml中配置好預設首頁為index.html。

直接開啟index.html或者使用伺服器方式訪問。

顯示如下：




本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More