1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    34
    Vote Rating
    3
    MichelleWong is on a distinguished road

      0  

    Default Listview made with store don't show up in browser

    Listview made with store don't show up in browser


    I got a problem in architect 2. When I make a listview, with use of a store or storeJsonP and local file, e.g. data.js, it will show up in my Sencha Architect design. But If I wants to see it in my Chrome browser, I got a blank listview without any content.

    Can someone tell me what I am doing wrong? Am I forgotten any settings or something?

  2. #2
    Sencha User
    Join Date
    Feb 2012
    Posts
    21
    Vote Rating
    1
    DracisFL is on a distinguished road

      0  

    Default


    Have you viewed the JavaScript Console in Chrome to see if you are getting any error messages ?

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    148
    Vote Rating
    2
    denisputnam is on a distinguished road

      0  

    Default data grid data problem

    data grid data problem


    I am having a simliar problem and I am not getting any errors in the console. I posted the data grid data problem with the .zip file and the source code produced by the Architect Designer.

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    34
    Vote Rating
    3
    MichelleWong is on a distinguished road

      0  

    Default


    This is the error message i got on the error console, but I don't know what this mean, I have tried to set the layout to fit, hbox, vbox etc. but it doesn't help.

    [WARN][Ext.Base#callParent] Attempting to create a DataView with a layout. DataViews do not have a layout configuration as their items are laid out automatically.

    Can anyone help me out with this?


    Here are some screenshots:

    1) this one is the design code in sencha architect
    Schermafbeelding 2012-04-23 om 22.18.15.png

    2) this is the preview in my Chrome browser

    Schermafbeelding 2012-04-23 om 22.20.35.png

    @DracisFL, I can setup my model and store with data correctly. And this also shows in my listview in Architect, but I don't know why this won't show on my browser.


  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    21
    Vote Rating
    1
    DracisFL is on a distinguished road

      0  

    Default


    pic.jpg

    I put it on my local server and it did not initially work for me either.. looking at your store and model I changed a few things around.. Not saying which way is right or wrong.. this just worked for me.

    pic2.jpg

    pic3.jpg

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    21
    Vote Rating
    1
    DracisFL is on a distinguished road

      0  

    Default


    @MichelleWong - , well perhaps the more experienced users can tell you the why the error on the dataview? I'm relatively new to all this myself.. However, I did manage to make a nice touch application for my own learning process.. using list. So I'm curious did you actually select "List" View from the options or did you select "dataview" ?

    Also, perhaps you would want to post your code ? Others may be able to look at it and point out any issues they see..

    ship.jpg

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Posts
    34
    Vote Rating
    3
    MichelleWong is on a distinguished road

      0  

    Default


    @DracisFL, I have double checked, and I've use a ' List' to show my list items and not Dataview. (It's, Ext.dataview.List)

    I have made a simpeler app, to show you the items. here are the screen and the code:

    1) the preview in my Sencha Architect
    Schermafbeelding 2012-04-24 om 22.21.46.jpg

    2) this is the preview in my Chrome browser and the error message in my console
    Schermafbeelding 2012-04-24 om 22.22.08.jpg

    here are the code:

    View:
    Code:
    Ext.define('MyApp.view.TabNav', {
        extend: 'Ext.tab.Panel',
        alias: 'widget.tabnav',
        requires: [
            'MyApp.view.TeamTabPanel'
        ],
    
    
        config: {
            layout: {
                animation: 'scroll',
                type: 'card'
            },
            items: [
                {
                    xtype: 'container',
                    title: 'Home',
                    iconCls: 'home',
                    items: [
                        {
                            xtype: 'teamtabpanel'
                        }
                    ]
                },
                {
                    xtype: 'container',
                    html: 'dit is tab2',
                    title: 'Schema',
                    iconCls: 'compose'
                },
                {
                    xtype: 'container',
                    title: 'Team',
                    iconCls: 'team'
                },
                {
                    xtype: 'container',
                    title: 'Videos',
                    iconCls: 'favorites'
                },
                {
                    xtype: 'container',
                    html: '',
                    styleHtmlContent: true,
                    title: 'Clubinfo',
                    iconCls: 'info'
                }
            ],
            tabBar: {
                docked: 'bottom'
            }
        }
    
    
    });
    ########### and the teamTabPanel #######
    Code:
    Ext.define('MyApp.view.TeamTabPanel', {
        extend: 'Ext.tab.Panel',
        alias: 'widget.teamtabpanel',
    
    
        config: {
            layout: {
                animation: 'slide',
                type: 'card'
            },
            items: [
                {
                    xtype: 'container',
                    layout: {
                        type: 'fit'
                    },
                    title: 'Staff',
                    items: [
                        {
                            xtype: 'list',
                            layout: {
                                type: 'vbox'
                            },
                            itemTpl: [
                                '<div>{naam}</div>'
                            ],
                            store: 'Spelers'
                        }
                    ]
                },
                {
                    xtype: 'container',
                    html: 'tab3',
                    title: 'Bestuur'
                }
            ]
        }
    
    
    });
    ############## the store ##############
    Code:
    Ext.define('MyApp.store.Spelers', {
        extend: 'Ext.data.Store',
        requires: [
            'MyApp.model.Spelers'
        ],
    
    
        config: {
            autoLoad: true,
            model: 'MyApp.model.Spelers',
            storeId: 'Spelers',
            proxy: {
                type: 'ajax',
                url: 'data/spelers.json',
                reader: {
                    type: 'json',
                    rootProperty: 'spelers'
                }
            },
            grouper: {
                property: 'positie'
            },
            sorters: {
                direction: 'DESC',
                property: 'rugnummer'
            }
        }
    });
    If you need more info, please let me know.
    I just feel very strange.... and don't know what to do for now..... Please help me out.
    Many thanks!
    Last edited by aconran; 24 Apr 2012 at 3:27 PM. Reason: add code tags

  8. #8
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,365
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    As shown in the debugging information that you posted. The store isn't being found.

    Is the store in the Application stores: configuration?

    Also, you should remove the layout configuration from the List.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  9. #9
    Sencha User
    Join Date
    Apr 2012
    Posts
    34
    Vote Rating
    3
    MichelleWong is on a distinguished road

      0  

    Default


    Hi Aconran,

    I have made a new simpel testing again, with a new store, model and list display.
    But I got the same error message. The records are loaded and I didn't get any error message from Sencha Architect. No height and width are set in the List config.

    I have uploaded the files. Maybe you can take a look at it?

    I'm really confuse and don't know what I did wrong... any help should be great!
    Attached Files

  10. #10
    Sencha User
    Join Date
    Feb 2012
    Posts
    21
    Vote Rating
    1
    DracisFL is on a distinguished road

      0  

    Default


    Hi Michelle,

    I got the store not found error. Looked at your code and added a controller referencing your store/views/model.. and voila it worked. Like aconran was saying, a configuration issue.

    mwong.png

    Also, once the store was found, I had to widen your real estate to show the list..

    Hope that helps..
    Attached Files