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

【问题标题】：extjs Databinding ViewModel and grid doesn't workextjs 数据绑定 ViewModel 和网格不起作用
【发布时间】：2014-08-23 08:03:27
【问题描述】：

我有一个用户模型：

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 视图模型：

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 错误。

我做得对吗？

【问题讨论】：

标签： extjs mvvm data-binding

【解决方案1】：

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

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

【讨论】：