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构建应用程序时,将 ...
随机推荐
- 无网络环境下安装Dynamics CRM
在安装CRM时会需要很多的组件支持,没有这些组件是没法安装的,一般我们都是选择机器联网后在线安装,但也有特殊情况确实不能联网的,可参考这篇文章 https://blogs.msdn.microsoft ...
- 最简单的基于librtmp的示例：发布（FLV通过RTMP发布）
===================================================== 最简单的基于libRTMP的示例系列文章列表: 最简单的基于librtmp的示例:接收(RT ...
- Intellij IDEA插件开发入门
现今的IDE尽管有如"洪水猛兽"般强大,但要知道再强大的IDE也没法提供给使用者想要的一切功能, 所以IDE一般都提供有API接口供开发者自行扩展.下面以Intellij IDEA ...
- [Python]django使用多进程连接msyql错误
问题 mysql 查询出现错误 error: (2014, "Commands out of sync; you can't run this command now") 查询 m ...
- Sprite添加阴影摇摆动画（Unity3D开发之九）
猴子原创,欢迎转载.转载请注明: 转载自Cocos2D开发网–Cocos2Dev.com,谢谢! 原文地址: http://www.cocos2dev.com/?p=575 今天看到一个很简单的摇摆动 ...
- Tensorflow使用Cmake在Windows下生成VisualStudio工程并编译
传送门: https://github.com/tensorflow/tensorflow/tree/r0.12/tensorflow/contrib/cmake http://www.udpwork ...
- Android5.1设备无法识别exFAT文件系统的64G TF卡问题
64G TF卡刚买回来的时候默认exFAT文件系统,在电脑端(XP和WIN7)可以识别,但在我们Android5.1S设备无法识别,采用guiformat工具格式化为FAT32文件系统后才可以正常识别 ...
- flex 强制转换类型失败无法将object转换为XXX
错误描述 flex在加载module时报出如题所示的错误, 实际表现 问题就出现在这 我取消这个错误提示框 再次在前台查询数据 就一切ok 问题就出现在这一句 var zoufangModel:ZfR ...
- Visual Studio 2010多线程编程
随着处理数据量的逐渐增大,串行单核的程序,犹如残灯缺月,无法满足运用需求.大规模集群的出现,解决了这一技术难题.本文旨在探讨如何使用多CPU并行编程,关于CUDA的并行前面文章已有讲述.本文结构分为三 ...
- leetcode之word ladder
对于之前没有接触过该类型题目的人来说,此题无疑是个难题,本人提交了10次才正确通过,期间遇到了非常多的问题,感觉几乎把OJ的所有错误遍历了一遍,下面详细说说自己做该题的经验. 首先承认,我一开始并没有 ...