Sencha touch中的數據視圖

Question

我是新手。我試圖使用數據存儲顯示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> 

我prblem是，當我執行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 

     }); 
    } 
}); 

你忘了添加itemSelector的數據視圖，並把auroLoad地產出店定義