Sencha Touch中的数据视图 [英] Data view in Sencha touch

问题描述

我是新手。我正在尝试使用数据存储显示JSON数据。

以下是我的代码"gridView2.js"代码：

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,

   onReady: function() {        

        Ext.regModel('Product', {
            fields: [
                {name: 'name',        type: 'string'},
                {name: 'description', type: 'string'},
                {name: 'price',       type: 'float'},
                {name: 'image_url',   type: 'string'},
                {name: 'in_stock',    type: 'boolean'}
            ]
        });

        Ext.regModel('car', {
            fields: [                               
                {name: 'manufacture',type: 'string'},
                {name: 'model',   type: 'string'},
                {name: 'price',    type: 'decimal'}

            ]
        });

        var productsList = new Ext.DataView({
            store: new Ext.data.Store({
                model: 'car',
                proxy: {
                    type: 'ajax',
                    url : 'cars.json',
                    reader: {
                        type: 'json',
                        root: 'data'
                    }
                }
            }),
            tpl: new Ext.XTemplate(
                '<tpl for=".">',
                    '<div>',
                        '<img src="{manufacture}" />',
                        '<div class="button">Buy</div>',
                    '</div>',
                '</tpl>'
            ),
            fullscreen: true,
            autoLoad : true
        });


    }//ends onReady   
});

我的JSON文件包含：

{"data":[{"created_at":null,"id":1,"manufacture":"tata","model":"indica","price":200000,"updated_at":null},{"created_at":null,"id":2,"manufacture":"suzuki","model":"waganor","price":400000,"updated_at":null},{"created_at":null,"id":3,"manufacture":"mahindra","model":"xylo","price":600000,"updated_at":null}],"results":3}

我的html代码是：

登录屏幕%2

 <!-- Sencha Touch CSS -->
 <link rel="stylesheet" href="resources/css/sencha-touch.css" type="text/css">

 <!-- Custom CSS -->
  <!--<link rel="stylesheet" href="css/guide.css" type="text/css">-->


 <!-- Sencha Touch JS -->
 <script type="text/javascript" src="sencha-touch-debug.js"></script>
<script type="text/javascript" src="sencha-touch.js"></script>

 <!-- Application JS -->
 <!--  <script type="text/javascript" src="transaction.js"></script> -->
  <script type="text/javascript" src="gridView2.js"></script> 

我的问题是，当我执行html文件时，它没有显示任何内容。

推荐答案

以下代码正确且工作正常：

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,

   onReady: function() {        

        Ext.regModel('Product', {
            fields: [
                {name: 'name',        type: 'string'},
                {name: 'description', type: 'string'},
                {name: 'price',       type: 'float'},
                {name: 'image_url',   type: 'string'},
                {name: 'in_stock',    type: 'boolean'}
            ]
        });

        Ext.regModel('car', {
            fields: [                               
                {name: 'manufacture',type: 'string'},
                {name: 'model',   type: 'string'},
                {name: 'price',    type: 'decimal'}

            ]
        });

        var productsList = new Ext.DataView({
            store: new Ext.data.Store({
                model: 'car',
                proxy: {
                    type: 'ajax',
                    url : 'cars.json',
                    reader: {
                        type: 'json',
                        root: 'data'
                    }
                },
                autoLoad : true
            }),
            tpl: new Ext.XTemplate(
                '<tpl for=".">',
                    '<div class="item">',
                        '<img src="{manufacture}" />',
                        '<div class="button">Buy</div>',
                    '</div>',
                '</tpl>'
            ),
            itemSelector: "div.item",
            fullscreen: true

        });
   }
});

您忘记为DataView添加itemSelector并将auroLoad属性放在存储定义之外

这篇关于Sencha Touch中的数据视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！