1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Vote Rating
    0
    Answers
    4
    robl is on a distinguished road

      0  

    Question Unanswered: How do I reference a store from a view in a MVC app?

    Unanswered: How do I reference a store from a view in a MVC app?


    I have a Panel which has a List of employees. The employees are in store/Employees.js.

    view/Employees.js
    Code:
    Ext.define('MyApp.view.Employees', {
        extend: 'Ext.Panel',
        xtype: 'employeepanel'
        config: {
            title: 'Employees',
            iconCls: 'team',
            layout: 'card',
            items: [
            {
                xtype: 'panel',
                layout: 'fit',
                items: [
                {
                    xtype: 'list',
                    indexBar: true,
                    itemTpl: '<div>{lastName}</div>',
                    store: MyApp.store.Employee
                }
                ]
            }
            ]
        },
    });
    store/Employees.js
    Code:
    Ext.define('MyApp.store.Employees', {
     extend: 'Ext.data.Store',
    model: 'MyApp.model.Employee',
    requires: ['MyApp.model.Employee']
    data: [
    { lastName: 'Smith', firstName: 'Robert'},
    { lastName: 'Brown', firstName: 'John'},
    { lastName: 'Evans', firstName: 'Mary'}
    ]
    
    }
    );
    In the config:

    Code:
    store: MyApp.store.Employee
    Should this be in quotes? Should it be the "id" of the store? Do I need a "requires"?

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    Answers
    28
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    The MVC package automatically assigns id's to stores based on their class name. In your example the following should work:

    store: 'Employee'

    Remember to add this store in either your Application, a Controller, or as a requires in your View.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Vote Rating
    0
    Answers
    4
    robl is on a distinguished road

      0  

    Default


    Thanks but it doesn't work in that nothing is displayed in the list. How can I debug this? Is there a method I can implement to dump the contents of the store? And how do I reference the store from that method?

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Vote Rating
    0
    Answers
    4
    robl is on a distinguished road

      0  

    Default


    The strange thing is that this code doesn't work:

    Code:
                {
                    xtype: 'list',
                    indexBar: true,
                    itemTpl: '<div>{lastName}</div>',
                    store: 'MyApp.store.Employee'
                }
    but this does work:

    Code:
                {
                    xtype: 'list',
                    indexBar: true,
                    itemTpl: '<div>{lastName}</div>',
                    store: {
                        model: 'MyApp.model.Employee',
                        data: [
                        { lastName: 'Brown' },
                        { lastName: 'Smith' }
                        ]
                    }
                }

  5. #5
    Sencha User DrunkenBeard's Avatar
    Join Date
    May 2011
    Posts
    55
    Vote Rating
    -2
    Answers
    2
    DrunkenBeard has a little shameless behaviour in the past

      0  

    Default


    @robl,

    You are forgetting an "s" after Employee. The store is defined as MyApp.store.Employees but you're referencing it as MyApp.store.Employee. Try this instead :

    Code:
    {
        xtype: 'list',
        indexBar: true,
        itemTpl: '<div>{lastName}</div>',
        store: 'Employees'
    }

  6. #6
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Vote Rating
    0
    Answers
    4
    robl is on a distinguished road

      0  

    Default


    Unfortunately, that was just a typo in my post and not in my code. I am still looking for a solution. More importantly, I am looking for a way to debug these types of problems. I need to help on what methods I can add to a Component that allow me to print out debug logs before and after the component is rendered (or thereabouts.) The only one I know of is "initialize" I also need to know how to reference objects that are part of a config: i.e. If I have a "list" inside a "panel", how do I get a reference to it so that I can print a debug log with some of it's attributes?

    Quote Originally Posted by DrunkenBeard View Post
    @robl,

    You are forgetting an "s" after Employee. The store is defined as MyApp.store.Employees but you're referencing it as MyApp.store.Employee. Try this instead :

    Code:
    {
        xtype: 'list',
        indexBar: true,
        itemTpl: '<div>{lastName}</div>',
        store: 'Employees'
    }

  7. #7
    Sencha User
    Join Date
    Aug 2011
    Posts
    8
    Vote Rating
    0
    robcolburn is on a distinguished road

      0  

    Default Just learning myself

    Just learning myself


    Check out Tommy's post:
    http://www.sencha.com/learn/architec...xt-js-4-part-3

    Looks like you want to avoid ref'ing a view from a store if you can. If you need to, add a

    <code>
    ...
    stores: ['Employees']
    ...
    </code>

    to your Employees view. Then you can do this.getEmployeesStore() for your list.