Sencha touch 2 入门 -------- DataView 显示服务器端JSON文件数据
今天学习了下DataView如何显示JSON文件数据,废话不多说，直接贴代码:
首先看下文件目录:
然后看下我们要处理的JSON文件,bookInfo.json.
{
"success":true,
"books":[
{
"id":"1",
"image_url":"resources/images/english.jpg",
"book_name":"考研英语",
"author":"孙悟空",
"description":"内容系统而全面，英语学习的好帮手！内容系统而全面，英语学习的好帮手！内容系统而全面，英语学习的好帮手！内容系统而全面，英语学习的好帮手！"
},{
"id":"2",
"image_url":"resources/images/math.jpg",
"book_name":"考研数学",
"author":"刘诗诗",
"description":"内容系统而全面，数学学习的好帮手，内容系统而全面，数学学习的好帮手内容系统而全面，数学学习的好帮手内容系统而全面，数学学习的好帮手"
}]
}
接着是index.html，里面有我们定义好的样式
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>myapp</title>
<style type="text/css">
/**
* Example of an initial loading indicator.
* It is recommended to keep this as minimal as possible to provide instant feedback
* while other resources are still being loaded for the first time
*/
html, body {
height: 100%;
background-color: #1985D0
} #appLoadingIndicator {
position: absolute;
top: 50%;
margin-top: -15px;
text-align: center;
width: 100%;
height: 30px;
-webkit-animation-name: appLoadingIndicator;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
} #appLoadingIndicator > * {
background-color: #FFFFFF;
display: inline-block;
height: 30px;
-webkit-border-radius: 15px;
margin: 0 5px;
width: 30px;
opacity: 0.8;
} @-webkit-keyframes appLoadingIndicator{
0% {
opacity: 0.8
}
50% {
opacity: 0
}
100% {
opacity: 0.8
}
} .Book-item{
padding:10px 0 10px 68px;
border-top:1px solid #ccc;
}
.Book-item h2{
font-weight:bold;
} .Book-item .Book_img{
position:absolute;
left:10px;
} .Book-item .Book_img img{
max-width:59px;
} .Book-item .Book_info{
padding-left:5px;
font-size:12px;
}
.x-item-selected{
background-color:blue;
color:white;
}
</style>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
最后就是app.js
Ext.application({
name: 'myapp',
requires:['Ext.SegmentedButton','Ext.Toolbar','Ext.Panel','Ext.MessageBox','Ext.data.Store'],
launch:function(){
//定义一个Model
Ext.define('BookInfo',{
extend:'Ext.data.Model',
config:{
fields:['image_url','book_name','author','description']
}
});
//存储类（Store）封装了一个客户端缓存的模型对象,通过proxy来加载数据
var bookStore=Ext.create('Ext.data.Store',{
model:'BookInfo',
autoLoad:true,
proxy:{
type:'ajax',
url:'bookInfo.json',
reader:{
type:'json',
rootProperty:'books' //这里的 books是传递过来JSON数据的一个books节点，里面是bookInfo对象数组,如果上面还有节点,就是xxx.books
}
}
});
//定义一个tpl模板,用来在页面显示数据
var bookTempalte=new Ext.XTemplate(
'<tpl for=".">',
'<div class="Book_img"><img src={image_url} /></div>',
'<div class="Book_info">',
'<h2>{book_name}</h2><br><h3>作者:{author}</h3>',
'<p>{description:ellipsis(40)}</p>',
'</div>',
'</tpl>'
);
//dataview
var dataview=Ext.create('Ext.DataView',{
store:bookStore,
itemTpl:bookTempalte,
baseCls:'Book' //指的是Book-item样式
});
Ext.Viewport.add(dataview);
}
});
代码写完后，运行下，页面结果如下：
Sencha touch 2 入门 -------- DataView 显示服务器端JSON文件数据的更多相关文章
- 使用dataview组件显示服务器端xml文件数据
来自<sencha touch权威指南>,约193页开始 ------------------------------------- (1)app.js代码: Ext.require([' ...
- Android - 读取JSON文件数据
Android读取JSON文件数据 JSON - JavaScript Object Notation 是一种存储和交换文本信息的语法. JSON对象在花括号中书写.用逗号来分隔值. JSON数组在方 ...
- jquery简单ajax示例_读取json文件数据
来自于<jquery权威指南> -------------------------------------- 点击button后,获取到json文件数据,显示如下: Json文件: [ { ...
- php获取json文件数据并动态修改网站头部文件meta信息 --基于CI框架
话不多说了.直接开始吧 (如果有中文.请注意json只认utf-8编码) 首先你需要有一个json文件数据 { "index": { ...
- Unity 用C#脚本读取JSON文件数据
读取JSON文件数据网上有很多方法吗,这里采用SimpleJSON,关于SimpleJSON的介绍参考以下链接:http://wiki.unity3d.com/index.php/SimpleJSON ...
- 【翻译】Sencha Touch 2入门：创建一个实用的天气应用程序之三
原文:Getting Started with Sencha Touch 2: Build a Weather Utility App (Part 3) 作者:Lee BoonstraLee is a ...
- Sencha Touch快速入门（译）
翻译自:http://www.sencha.com/learn/sencha-touch-quick-start/ 1.下载Sencha Touch SDK——下载链接 2.安装Safari或Chro ...
- jquery 获取json文件数据，显示到jsp页面上， 或者html页面上
[{"name":"中国工商银行","code":102},{"name":"中国农业银行",&qu ...
- sencha touch 框架的几种核心脚本文件之间的区别
sencha-touch-debug.js 供开发时用sencha-touch.js 供发布时用sencha-touch-all.js All 供不能使用SDK构建应用程序时,将 ...
随机推荐
- iOS日历中给一个事件添加多个提醒
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) iOS自带的日历应用中,我们最多只能给一个事件设置2个提醒,但 ...
- OpenCV相机标定
标签(空格分隔): Opencv 相机标定是图像处理的基础,虽然相机使用的是小孔成像模型,但是由于小孔的透光非常有限,所以需要使用透镜聚焦足够多的光线.在使用的过程中,需要知道相机的焦距.成像中心以及 ...
- 自定义AlertDialog(仿微信)
安卓自定义AlertDialog,原理很简单: AlertDialog dialog = new AlertDialog.Builder(MainActivity.this).create(); di ...
- javascript命名规则
javascript对大小写敏感(关键字.函数名.变量名等),标识符的首字符必须是字母.下划线或者$符,其后的字符可以含数字 如果之声明了变量,并未对其赋值,默认为undefined javascri ...
- 与音频相关的技术知识点总结（Linux方向的开发）
几个术语和概念: 1. 关于PCM的 PCM是Pulse code modulation的缩写,它是对波形最直接的编码方式.它在音频中的地位可能和BMP在图片中的地位有点类似吧. Samp ...
- C++对C的函数拓展 - 占位参数
函数占位参数 占位参数只有参数类型声明,而没有参数名声明 一般情况下,在函数体内部无法使用占位参数 demo #include <iostream> using namespace std ...
- Android学习之Animation(一）
3.0以前,android支持两种动画模式,Tween Animation,Frame Animation,在android3.0中又引入了一个新的动画系统:Property Animation,这三 ...
- 【Unity Tips】备忘录（扫盲篇）
写在前面 Unity3D虽然是个非常方便的游戏引擎,但还是有一些地方会产生一些让人莫名其妙的问题,而且debug半天也不知道到底哪里错了.往往在经过了大量的log之后,也许我们才顿悟,原来Unity内 ...
- 尚学堂马士兵struts2 课堂笔记(一)
06_尚学堂马士兵_Struts2_Struts2_HelloWorld_5 <constant name="struts.devMode" value="true ...
- 开始ITGEGE教育社区的视频录制----嵌入式基础知识讲解
从8月份开始,陆陆续续要对我的第一份兼职工作ITGEGE讲师做教学视频录制了,本人水平有限,我只讲一些开发在工作中的应用,其它细节的东西不做深究,毕竟本人工作经验和精力也有限,白天要上班,特别是最近又 ...