extjs数据绑定ViewModel和网格不起作用

时间:2014-08-23 08:03:27

标签: extjs mvvm data-binding

我有一个用户模型:

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
        }
    }
});

用户存储:

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

UserViewModel Viewmodel:

Ext.define('CrudTest.viewmodel.UserViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.uservm',
    stores: {
        users: new CrudTest.store.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,
    }]
});

将网格存储设置为用户存储时,网格加载良好。但我需要viewmodel绑定,在这种情况下,我的网格显示没有任何行,也没有extjs错误。

我做对了吗?

1 个答案:

答案 0 :(得分:3)

在您的视图模型中,不要创建商店,而只是指定您的模型

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

然后在您的网格中

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