1. #1
    Sencha User
    Join Date
    Nov 2007
    Posts
    24
    Vote Rating
    0
    icarrion is on a distinguished road

      0  

    Default Cannot get JSON to load in list

    Cannot get JSON to load in list


    I'm not sure what I'm doing wrong. I'm trying to get a json file loaded in a Ext.dataview.List but all it does say is "Loading...". In firebug I can see that the store is loading the data correctly and I think I binded the UI to the store. Not sure what else to do?

    The code was 100% coded using Sencha 2.0 designer Beta.

    Any help would be much appreciated.

    MyController.js
    Code:
    Ext.define('HelloWorld.controller.MyController', {
        extend: 'Ext.app.Controller',
    
        config: {
            views: [
                'HomeView'
            ],
            control: {
                "#myButtonHelloWorld": {
                    tap: 'onMybuttonTap'
                }
            }
        },
    
        onMybuttonTap: function(button, e, options) {
            Ext.Msg.alert('Title', 'The quick brown fox jumped over the lazy dog.', Ext.emptyFn);
        }
    
    });
    cars.json
    Code:
    {
        data: [{
            manufacturer: 'Porsche',
            model: '911',
            price: 135000,
            wiki: 'http://en.wikipedia.org/wiki/Porsche_997',
            img: '2004_Porsche_911_Carrera_type_997.jpg',
            quality: [{name: 'overall', rating:1}, {name: 'mechanical', rating: 4}, {name: 'powertrain', rating: 2}, {name: 'body', rating: 4},{name: 'interior', rating: 3},{name: 'accessories', rating: 2}]
        },{
            manufacturer: 'Nissan',
            model: 'GT-R',
            price: 80000,
            wiki:'http://en.wikipedia.org/wiki/Nissan_Gt-r',
            img: '250px-Nissan_GT-R.jpg',
            quality: [{name: 'overall', rating:2}, {name: 'mechanical', rating: 3}, {name: 'powertrain', rating: 5}, {name: 'body', rating: 4},{name: 'interior', rating: 2},{name: 'accessories', rating: 2}]
        },{
            manufacturer: 'BMW',
            model: 'M3',
            price: 60500,
            wiki:'http://en.wikipedia.org/wiki/Bmw_m3',
            img: '250px-BMW_M3_E92.jpg',
            quality: [{name: 'overall', rating:3}, {name: 'mechanical', rating: 5}, {name: 'powertrain', rating: 3}, {name: 'body', rating: 4},{name: 'interior', rating: 5},{name: 'accessories', rating: 3}]
        },{
            manufacturer: 'Audi',
            model: 'S5',
            price: 53000,
            wiki:'http://en.wikipedia.org/wiki/Audi_S5#Audi_S5',
            img: '250px-Audi_S5.jpg',
            quality: [{name: 'overall', rating:4}, {name: 'mechanical', rating: 1}, {name: 'powertrain', rating: 1}, {name: 'body', rating: 4},{name: 'interior', rating: 1},{name: 'accessories', rating: 5}]
        },{
            manufacturer: 'Audi',
            model: 'TT',
            price: 40000,
            wiki:'http://en.wikipedia.org/wiki/Audi_TT',
            img: '250px-2007_Audi_TT_Coupe.jpg',
            quality: [{name: 'overall', rating:5}, {name: 'mechanical', rating: 2}, {name: 'powertrain', rating: 2}, {name: 'body', rating: 3},{name: 'interior', rating: 4},{name: 'accessories', rating: 1}]
        }]
    }

    CarDataModel.js
    Code:
    Ext.define('HelloWorld.model.CarDataModel', {
        extend: 'Ext.data.Model',
        config: {
            fields: [
                {
                    name: 'manufacturer',
                    type: 'string'
                },
                {
                    name: 'model',
                    type: 'string'
                },
                {
                    name: 'price',
                    type: 'int'
                },
                {
                    name: 'wiki',
                    type: 'string'
                },
                {
                    name: 'img',
                    type: 'string'
                },
                {
                    name: 'quality',
                    type: 'string'
                }
            ]
        }
    });

    CarDataJson.js
    Code:
    Ext.define('HelloWorld.store.CarDataJson', {
        extend: 'Ext.data.Store',
        requires: [
            'HelloWorld.model.CarDataModel'
        ],
    
        config: {
            autoLoad: true,
            model: 'HelloWorld.model.CarDataModel',
            storeId: 'CarDataJson',
            proxy: {
                type: 'ajax',
                url: 'http://localhost/HelloWorld/app/data/cars.json',
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                }
            }
        }
    });

    HomeView.js
    Code:
    Ext.define('HelloWorld.view.HomeView', {
        extend: 'Ext.Panel',
    
        config: {
            items: [
                {
                    xtype: 'list',
                    height: 300,
                    id: 'HomeViewList',
                    itemId: 'mylist1',
                    layout: {
                        type: 'fit'
                    },
                    itemTpl: [
                        '<img src="data/{img}" style="float: right" />',
                        'Manufacturer: {manufacturer}<br>',
                        'Model: <a href="{wiki}" target="_blank">{model}</a><br>',
                        'Price: {price:usMoney}<br>'
                    ],
                    store: 'CarDataJson'
                },
                {
                    xtype: 'button',
                    height: '',
                    id: 'myButtonHelloWorld',
                    itemId: 'mybutton',
                    text: 'Hello World Button'
                }
            ]
        }
    
    });
    designer.js
    Code:
    Ext.Loader.setConfig({
        enabled: true
    });
    
    Ext.application({
        models: [
            'CarDataModel'
        ],
    
        stores: [
            'CarDataJson'
        ],
    
        views: [
            'HomeView'
        ],
    
        name: 'HelloWorld',
    
        controllers: [
            'MyController'
        ],
    
        launch: function() {
            Ext.create('HelloWorld.view.HomeView', {fullscreen: true});
        }
    });
    designer.html
    Code:
    <!DOCTYPE html>
    
    <!-- Auto Generated with Sencha Designer -->
    <!-- Modifications to this file will be overwritten. -->
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>HelloWorld</title>
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/resources/css/sencha-touch.css"/>
        <script type="text/javascript" src="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/sencha-touch-all-debug.js"></script>
        <script type="text/javascript" src="designer.js"></script>
        <script type="text/javascript">
            if (!Ext.browser.is.WebKit) {
                alert("The current browser is unsupported.\n\nSupported browsers:\n" +
                    "Google Chrome\n" +
                    "Apple Safari\n" +
                    "Mobile Safari (iOS)\n" +
                    "Android Browser\n" +
                    "BlackBerry Browser"
                );
            }
        </script>
    </head>
    <body></body>
    </html>

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Add layout : 'fit' to you HelloWorld.view.HomeView panel.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Location
    VE
    Posts
    9
    Vote Rating
    0
    lg_sp is on a distinguished road

      0  

    Default


    Let me know if you fix it, Im having a simila trouble.

  4. #4
    Sencha User
    Join Date
    Nov 2007
    Posts
    24
    Vote Rating
    0
    icarrion is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Add layout : 'fit' to you HelloWorld.view.HomeView panel.
    It's already set for 'fit' unless I'm missing something? See below:

    Code:
    layout: {
                        type: 'fit'
                    },

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by icarrion View Post
    It's already set for 'fit' unless I'm missing something? See below:

    Code:
    layout: {
                        type: 'fit'
                    },
    Not on the list:

    Code:
    Ext.define('HelloWorld.view.HomeView', {
        extend: 'Ext.Panel',
    
        config: {
            layout : 'fit',
            items: [
                ...
            ]
        }
    
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Sencha User
    Join Date
    Nov 2007
    Posts
    24
    Vote Rating
    0
    icarrion is on a distinguished road

      0  

    Default


    I stand corrected, the panel was not set to fit. I added it as you can see the new source below but I still get a Loading... message.


    HomeView.js

    Code:
    Ext.define('HelloWorld.view.HomeView', {
        extend: 'Ext.Panel',
    
        config: {
            layout: {
                type: 'fit'
            },
            items: [
                {
                    xtype: 'button',
                    docked: 'bottom',
                    id: 'myButtonHelloWorld',
                    itemId: 'mybutton',
                    text: 'Hello World Button'
                },
                {
                    xtype: 'list',
                    height: 300,
                    id: 'HomeViewList',
                    itemId: 'mylist1',
                    layout: {
                        type: 'fit'
                    },
                    itemTpl: [
                        '<img src="data/{img}" style="float: right" />',
                        'Manufacturer: {manufacturer}<br>',
                        'Model: <a href="{wiki}" target="_blank">{model}</a><br>',
                        'Price: {price:usMoney}<br>'
                    ],
                    store: 'CarDataJson'
                }
            ]
        }
    
    });

  7. #7
    Sencha User
    Join Date
    Nov 2007
    Posts
    24
    Vote Rating
    0
    icarrion is on a distinguished road

      0  

    Default


    Here's the screen.

    mobile-hello-world-screen.jpg

  8. #8
    Sencha User
    Join Date
    Nov 2007
    Posts
    24
    Vote Rating
    0
    icarrion is on a distinguished road

      0  

    Default


    Is there a better way of trying to debug this? I'm using firebug and I can see that the store is being populated with data yet it still doesn't show. Doesn't appear to be a layout issue since I can see that the loading screen just sits there stuck. Not sure how else I can debug this?

    Any help would be much appreciated.

    Thanks,
    IRV

  9. #9
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Inspect the DOM. Are there a bunch of rows that are empty? Is the size of the list ok? What is going on in the DOM?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #10
    Sencha User
    Join Date
    Nov 2007
    Posts
    24
    Vote Rating
    0
    icarrion is on a distinguished road

      0  

    Default


    Please see screen shot below. I'm not sure where I need to look as I cannot find my HomeViewList to see the rows it loaded.

    HelloWorldScreenShotDebug.jpg