Sencha touch 2 入门 -------- DataView 显示服务器端JSON文件数据

来源：互联网发布：矩阵归一化怎么计算编辑：程序博客网时间：2024/05/16 17:00

今天学习了下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);    }});

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

0 0