View data in Sencha touch

Question

I am new to sench-touch. I am trying to show JSON data using a data store.

Here is my gridView2.js code:

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

my JSON file contains:

 {"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} 

my html code is:

Login screen 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> 

My prblem is when I execute the html file, it shows nothing.

Answer 1

The following code is correct and works:

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

You forgot to add itemSelector for the DataView and put the auroLoad property from the storage definition