CODEWITHSUNDEEP
extjsmvvmdata-binding
Mohammadreza
Mohammadreza

Reputation: 3229

extjs Databinding ViewModel and grid doesn't work

I have a user model:

Ext.define('CrudTest.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [{
        name: 'Id',
        type: 'int'
    }, {
        name: 'Name',
        type: 'string'
    }, {
        name: 'PhoneNumber',
        type: 'int'
    }, {
        name: 'Address',
        type: 'string'
    }, {
        name: 'StateName',
        type: 'string'
    }, {
        name: 'StateId',
        type: 'int',
        reference: 'State'
    } ],
    proxy: {
        type: 'rest',
        url: 'users',
        writer: {
            writeAllFields: true
        }
    }
});

And users store:

Ext.define('CrudTest.store.Users', {
    extend: 'Ext.data.Store',
    model: 'CrudTest.model.User',
    autoLoad: true,
});

And a UserViewModel Viewmodel:

Ext.define('CrudTest.viewmodel.UserViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.uservm',
    stores: {
        users: new CrudTest.store.Users()
    }
});

And a grid to show users:

Ext.define('CrudTest.view.Grid', {
    extend: 'Ext.grid.Panel',
    requires: ['CrudTest.store.Users', 'CrudTest.store.States', 'CrudTest.model.RegisterUserVM', 'CrudTest.viewmodel.UserViewModel'],
    alias: 'widget.myGrid',
    viewModel: {
        type: 'uservm',
    },
    columns: [{
        text: 'Name',
        bind: '{users.name}'
    }, {
        text: 'PhoneNumber',
        bind: '{users.PhoneNumber}'
    }, {
        text: 'Address',
        bind: '{users.Address}',
        sortable: false,
    }]
});

Grid load well when set store of my grid to users store. But I need viewmodel binding that in this case my grid appears without any row and no extjs error.

Am i doing right?

Upvotes: 2

Views: 3518

Answers (1)

Greatran
Greatran

Reputation: 190

In your view model do not create store , instead just specify your model 

Ext.define('CrudTest.viewmodel.UserViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.uservm',
    stores: {
        users: {
            model: 'CrudTest.model.User',
            autoLoad: true,
        }
    }
});

Then in your grid 

bind: {
    store: '{users}'
}
columns: [{
    text: 'Name',
    dataIndex: 'Name' {
        text: 'PhoneNumber',
        dataIndex: 'PhoneNumber',
        {
            text: 'Address',
            dataIndex: 'Address',
            sortable: false,
        },
    ],
});

Upvotes: 3

Related Questions