ExtJs ViewModel doesn't display data even if it's there

Question

I have the following model:

Ext.define('myApp.model.tool.SpecialModel', {
    extend: 'Ext.data.Model',

    fields: [
        {name: 'id', type: 'string'},
        {name: 'loginName', type: 'string'},
        {name: 'firstName', type: 'string'},
        {name: 'lastName', type: 'string'},
    ],

    proxy: {
        type: 'rest',
        url: '/special/url',
        reader: {
            type: 'json'
        }
    }

});

And this ViewModel:

Ext.define('myApp.view.support.MySpecialViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.myspecial',

    stores: {
        session: {
            model: 'myApp.model.tool.SpecialModel'
        }
    }

});

And this View:

Ext.define('myApp.view.support.MySpecialView', {
    extend: 'Ext.toolbar.Toolbar',

    viewModel: 'myspecial',

    config: {
        items: [
            {
                xtype: 'button',
                bind: '{session.lastName}',
                menu: [
                    {
                        text: 'My Profile',
                        handler: 'onProfileClick'
                    }
                ]
            }
        ]
    },

});

At the time the view is rendered, the store is already filled. Why isn't the button showing the lastName from the specified ViewModel? When I try with inline data it works.

Thanks in advance.

Edit: When I change the button binding to the following

...

                    xtype: 'button',
                    bind: 'Hello, {session.lastName}',
                    menu: [
                        {
                            text: 'My Profile',
                            handler: 'onProfileClick'
                        }
            ]
...

not even the hardcoded string is displayed. What am I missing here?

Edit2:

Here's my json data:

{
    "privileges": {
        "privManageCustomer": true,
        "privManageCustomerAccount": true,
    },
    "user": {
        "accountLocked": false,
        "accountLockedAt": null,
        "customerId": "12123213213123",
        "email": "213213",
        "failedLogins": 0,
        "firstName": null,
        "id": "123678213621783",
        "languageId": "de",
        "lastFailedLogin": null,
        "lastLogin": null,
        "lastName": "Whatever",
        "loginName": "test123"
    }
}

can you post us the json sample of url: '/special/url', Also a fiddle will be better — Kalaiarasan Manimaran, Sep 23 '15 at 10:56
I'm not pretty sure that the binding can be done in a such way.But in any case first of all you miss a rootProperty config of the reader, so the reader doesn't know from what part of json to get a data. rootProperty should equals to "user". Second - I wold never name my store or data element as a "session", while it can correlate with reserved session object. And if still doesn't work, try to bind to {session.data.items.0.lastName}. — yorlin, Oct 03 '15 at 17:40

score 0 · Answer 1 · answered Sep 23 '15 at 11:06

I think you're doing it wrong. You should use a store with a model. Please have a look at "5. Lab 2: Creating the data layer", this small tutorial (http://ladysign-apps.com/appcamp/slides/#2014-07-14_13-50_00-670_Z) was made by Lee Boonstra from Sencha. I'm always following her guidelines and never ran into any problems with my stores and the data binding.

Also I did notice you're using {session.lastName}, actually it should be {lastName} if the store was loaded correctly.

Thanks for the link, I really appreciate it! But its still not working yet. I'll try again later. — xhadon, Sep 24 '15 at 07:43

ExtJs ViewModel doesn't display data even if it's there

1 Answers1