Sencha touch 中的数据视图

Question

我是 sench-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 文件时它什么也不显示。

Answer 1

以下代码是正确且有效的：

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 属性置于商店定义之外