touch服务器端文件,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，里面有我们定义好的样式

myapp

/**

* 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;

}

最后就是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(

'',

'

',

'

',

'

{book_name}

作者:{author}

',

'

{description:ellipsis(40)}

',

'

',

''

);

//dataview

var dataview=Ext.create('Ext.DataView',{

store:bookStore,

itemTpl:bookTempalte,

baseCls:'Book' //指的是Book-item样式

});

Ext.Viewport.add(dataview);

}

});

代码写完后，运行下，页面结果如下：

使用dataview组件显示服务器端xml文件数据

来自,约193页开始 ------------------------------------- (1)app.js代码: Ext.require([' ...

Android - 读取JSON文件数据

Android读取JSON文件数据 JSON - JavaScript Object Notation 是一种存储和交换文本信息的语法. JSON对象在花括号中书写.用逗号来分隔值. JSON数组在方 ...

jquery简单ajax示例_读取json文件数据

来自于 -------------------------------------- 点击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构建应用程序时,将 ...

随机推荐

在table中进行内容搜索

$("tbody td").filter(":contains('" + x + "')").css('color','red').pare ...

关于有偿提供拼图响应式后台的通知---------pintuer ui的官方通知(www.pintuer.com)

拼图响应式前端框架版响应式后台正式发布. 考虑到目前拼图的状况,我们不打算免费开放下载,但也不会收各位朋友1分钱,该版后台将有偿提供给各位给予拼图贡献的朋友. 废话不多说,一切皆以有图有真相,下面上图 ...

SaltStack的salt-api里如何指定用户执行cmd.script

在杨威的协助下,命令行,API调用都完美搞定. 主要是RUNAS参数的位置,以及它作为CURL POST -D DATA的使用. salt '1.2.3.4' cmd.script "sal ...

初用MssqlOnLinux 【1】

https://docs.microsoft.com/zh-cn/sql/linux/quickstart-install-connect-red-hat 使用 Centos7,NetCore2.0, ...

codefroces 55D Beautiful numbers

[Description] 美丽数是指能被它的每一位非0的数字整除的正整数. [Input] 包含若干组数据,每组数据一行两个数n,m,表示求[n,m]之间的美丽数的个数. [output] 对于每组 ...

Django分页器的设置

Django分页器的设置 有时候在页面中数据有多条时很显然需要进行分页显示,那么在python中django可以这样设置一个分页处理 怎么样去设置呢? 我们要用到  Django  中的  Pagin ...

JavaScript 系列博客(一)

JavaScript 系列博客(一) 前言 本系列博客为记录学习 JavaScript 的学习笔记,会从基础开始慢慢探索 js.今天的学习笔记主要为 js 引入.定义变量以及 JavaScript 中 ...

click()和onclick()的区别

click()和onclick()的区别: 1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么 click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触 ...

A1061. Dating

Sherlock Holmes received a note with some strange strings: "Let's date! 3485djDkxh4hhGE 2984akD ...

Python+Selenium笔记(五)：生成测试报告

#HTMLTestRunner代码修改参考 微微微笑 的说明,下面是链接,这个已经说的很详细了 https://www.cnblogs.com/miniren/p/5301081.html (一) 前 ...