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
    35,704
    Vote Rating
    751
    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
    35,704
    Vote Rating
    751
    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
    35,704
    Vote Rating
    751
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar