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构建应用程序时,将 ...
随机推荐
- MAMP显示文件列表
背景 MAMP是Mac下的一个PHP+Nginx+MySQL的集成环境,支持多站点,不同版本PHP. 今天有人请教MAMP如何显示文件列表的问题,这里记录一下. 知识补充 一个网站为了安全考虑,默认是 ...
- CentOS下将php和mysql命令加入到环境变量中的几种方法
Linux CentOS配置LAPM环境时,为了方便,将php和mysql命令加到系统环境命令,下面我们记录几种在linux下将php和mysql加入到环境变量中的方法. 如果在没有添加到环境变量之前 ...
- Runtime系列（二）--Runtime的使用场景
Runtime 理解介绍的文章非常多,我只想讲讲Runtime 可以用在哪里,而我在项目里哪些地方用到了runtime.多以实际使用过程为主,来介绍runtime的使用. * 那么runtime 怎么 ...
- Linux内核线程
内核线程是直接由内核本身启动的进程.内核线程实际上是将内核函数委托给独立的进程,与系统中其他进程"并行"执行(实际上,也并行于内核自身的执行),内核线程经常被称为内核"守 ...
- 谈谈spring的缓存
缓存到底扮演了什么角色 请移步: http://hacpai.com/article/1376986299174 在对项目进行优化的时候,我们可以主要从以下三个方面入手: 1 缓存 2 集群 3 异 ...
- 02_MyBatis项目结构，所需jar包，ehcache.xml配置，log4j.properties,sqlMapConfig.xml配置，SqlMapGenerator.xml配置
项目结构(所需jar包,配置文件) sqlMapConfig.xml的配置内容如下: <?xmlversion="1.0"encoding="UTF-8&qu ...
- log4j 日志限制大小 拆分成30个 不按日期分日志 按大小拆分 按日期产生
先说一下按日期产生,不解释,大家都懂,这种方法的缺点就是很吃硬盘空间 log4j.rootLogger=INFO,logfile,stdout log4j.logger.java.sql=DEBUG, ...
- 网站开发进阶(三十四)编码中的setCharacterEncoding 理解
编码中的setCharacterEncoding 理解 1.pageEncoding="UTF-8"的作用是设置JSP编译成Servlet时使用的编码. 2.contentType ...
- SVN---搭建幸福之家
SVN百度百科对她这样进行阐述:SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从 ...
- spring mvc接收List集合、JUI传JSP List
JUI页面是这样的 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <div class=&quo ...