1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    2
    Vote Rating
    0
    blasting is on a distinguished road

      0  

    Default Unable to display Dataview

    Unable to display Dataview


    Hi all,

    I'm trying to show a list on my app Main view. The list load the data from a local store.
    Sadly, after many try and errors debugging, I ended with the app loading with no errors or warnings, but also with no list displayed. Could you help me figure out where i'm doing wrong?

    app.js
    Code:
    //<debug>
    Ext.Loader.setPath({
        'Ext': 'touch/src',
        'LaGuida': 'app'
    });
    //</debug>
    
    Ext.application({
        name: 'LaGuida',
        
        requires: 
        [
            'LaGuida.view.Main',
            'LaGuida.model.POI',
            'LaGuida.store.POI',
            'Ext.dataview.List'
        ],
        
        views: ['Main'],
        models: ['POI'],
        stores: ['POI'],
    
        icon: 
        {
            '57': 'resources/icons/Icon.png',
            '72': 'resources/icons/Icon~ipad.png',
            '114': 'resources/icons/Icon@2x.png',
            '144': 'resources/icons/Icon~ipad@2x.png'
        },
    
        isIconPrecomposed: true,
    
        startupImage: 
        {
            '320x460': 'resources/startup/320x460.jpg',
            '640x920': 'resources/startup/640x920.png',
            '768x1004': 'resources/startup/768x1004.png',
            '748x1024': 'resources/startup/748x1024.png',
            '1536x2008': 'resources/startup/1536x2008.png',
            '1496x2048': 'resources/startup/1496x2048.png'
        },
    
        launch: function() 
        {
            // Destroy the #appLoadingIndicator element
            Ext.fly('appLoadingIndicator').destroy();
    
            // Initialize the main view
            Ext.Viewport.add(Ext.create('LaGuida.view.Main'));
        }
    });
    Main.js
    Code:
    Ext.define('LaGuida.view.Main', 
    {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
        requires: 
        [
            'Ext.TitleBar',
            'LaGuida.view.POI_detail',
            'LaGuida.view.POI_list',
            'LaGuida.view.POI_map'
        ],
        
        config: 
        {
            tabBarPosition: 'bottom',
    
            items: 
            [
                {
                    title: 'Guide',
                    iconCls: 'bookmarks',
    
                    items:
                    [
                        {
                            // barra titolo
                            docked: 'top',
                            xtype: 'titlebar',
                            title: 'LaGuida'
                        },
                        {
                            // lista dei contenuti
                            xtype: 'poilist',
                            layout : 'vbox'
                        }
                    ]
                },
                {
                    title: 'Map',
                    iconCls: 'maps',
    
                    items: 
                    [
                        {
                            // barra del titolo
                            docked: 'top',
                            xtype: 'titlebar',
                            title: 'Map'
                        },
                        {
                            // mappe
                            //xtype: 'listapuntiinteresse'
                        }
                    ]
                }
            ]
        }
    });
    POI_list.js
    Code:
    Ext.define('LaGuida.view.POI_list', 
    {    
        extend: 'Ext.dataview.DataView',
        alias: 'widget.poilist',
        config:
        {
            xtype: 'dataview',
            fullscreen: true,
            store: 'POI',
            model: 'LaGuida.model.POI',
            itemTpl: '<div><div>{name}</div><div><img src="{s_img}" /><p>{s_descr}</p></div>',
            height: 300
        }
    });
    Store
    Code:
    Ext.define('LaGuida.store.POI', 
    {
        extend: 'Ext.data.Store',
        alias: 'store.POI',
        
        config:
        {
            model: 'LaGuida.model.POI',
            storeId: 'POI',
            autoLoad: true,
            autoSync: true, 
            sorters: 
            [
                { 
                    property:'name', direction:'ASC'
                }
            ],
            
            proxy:
            {
                type: 'ajax',
                url: './data/POI_rawdata.json'
            }
            
            
        }
    });
    Model
    Code:
    Ext.define('LaGuida.model.POI', 
    {
        extend: 'Ext.data.Model',
        
        config: 
        {
            fields: 
            [
                {name:'id', type:'int'}, 
                {name:'name', type:'string'}, 
                {name:'s_desc', type:'string'}, 
                {name:'f_desc', type:'string'},
                {name:'s_img', type:'string'},
                {name:'f_img', type:'string'}
            ]
        }
    });
    Controller
    Code:
    Ext.define('LaGuida.controller.POI', 
    {
        extend: 'Ext.app.Controller',
        
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,203
    Vote Rating
    856
    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


    It's because you are overnesting meaning you are nesting one component within a container that you do not need to be nesting. The DataView does not need to be nested within a container:

    Code:
    Ext.define('LaGuida.view.Main', {
        extend : 'Ext.tab.Panel',
        xtype  : 'main',
    
        requires : [
            'Ext.TitleBar',
            'LaGuida.view.POI_detail',
            'LaGuida.view.POI_list',
            'LaGuida.view.POI_map'
        ],
    
        config : {
            tabBarPosition : 'bottom',
            items          : [
                {
                    xtype   : 'poilist',
                    title   : 'Guide',
                    iconCls : 'bookmarks',
                    items   : [
                        {
                            // barra titolo
                            docked : 'top',
                            xtype  : 'titlebar',
                            title  : 'LaGuida'
                        }
                    ]
                },
                {
                    xtype   : 'listapuntiinteresse',
                    title   : 'Map',
                    iconCls : 'maps',
                    items   : [
                        {
                            // barra del titolo
                            docked : 'top',
                            xtype  : 'titlebar',
                            title  : 'Map'
                        }
                    ]
                }
            ]
        }
    });
    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.

Thread Participants: 1

Tags for this Thread