Question

I am new in sench-touch. I am trying to show JSON data using data Store.

Here is my code “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 am executing html file it shows nothing.

Answer 1

Following code is correct and working:

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 DataView and put auroLoad property out of store definition