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示例&lowbar;读取json文件数据

来自于 -------------------------------------- 点击button后,获取到json文件数据,显示如下: Json文件: [ { ...

php获取json文件数据并动态修改网站头部文件meta信息 --基于CI框架

话不多说了.直接开始吧 (如果有中文.请注意json只认utf-8编码) 首先你需要有一个json文件数据 { "index": { ...

Unity 用C&num;脚本读取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&period;pintuer&period;com)

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

SaltStack的salt-api里如何指定用户执行cmd&period;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&period; 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 (一) 前 ...