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);
    }
});

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