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

红太狼 2022-08-26 00:58 106阅读 0赞

今天学习了下DataView如何显示JSON文件数据,废话不多说，直接贴代码:

首先看下文件目录:

![SouthEast][]

然后看下我们要处理的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>
        
        <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);
        }
    });

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

![SouthEast 1][]

[SouthEast]: /images/20220824/60ff40885dc84a7e9bc8fbdac41425a9.png
[SouthEast 1]: /images/20220824/a5378e8826df442d88e37da4504d3dbc.png