使用 extjs5 中的视图模型将 json 字符串中的一组值放入表单中

Question

我正在处理我的第一个 extjs (5) 应用程序，我有两个主要问题，一个关于结构，另一个是技术问题。我的应用程序是一个管理面板。我有一个数据库 table，其键值对具有站点名称、关键字、元描述等设置。现在我想创建一个表单，用户可以在其中编辑这些选项。我现在的问题是我无法在表单中显示这些选项。

这是选项的模型：

Ext.define('Wp.model.Option', {
    extend: 'Wp.model.Base',
    idProperty: 'name',

    fields: [
        {name: 'name', type: 'string'},
        {name: 'value', type: 'string'}
    ]
});

我有以下看法：

Ext.define('Wp.view.settings.BasicSettings', {
    extend: 'Ext.form.Panel',
    xtype: 'wp-basic-settings',
    defaultType: 'textfield',
    title: 'Grundeinstellungen',
    cls: 'content-container',

    requires: [
        'Wp.view.settings.BasicSettingsModel'
    ],

    viewModel: 'basic-settings',

    fieldDefaults: {
        labelWidth: 250,
        width: '100%'
    },

    items: [{
        bind: '{siteName}',
        fieldLabel: 'Name',
        allowBlank: false

    },{
        bind: '{lang}',
        fieldLabel: 'Lokalisierung',
        allowBlank: false

    }],
    buttons: [{
        text: 'Speichern',
        formBind: true,
        listeners: {
        }
    }]
});

如果我正确理解 MVVC，正确的解决方案是创建一个视图模型，它将获得 Wp.model.Option 和 "pass" 类型的选项集到视图。

我尝试了不同的视图模型，但无法正常工作。

Ext.define('Wp.view.settings.BasicSettingsModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.basic-settings',

    requires: [
        'Wp.model.Option'
    ],

    stores: {
        data: {
            model: 'Wp.model.Option',
            proxy: {
                type: 'rest',
                url: 'BasicSettings.json'
            },
            reader: {
                type: 'json'
            },
            autoLoad: true
        }
    },

    formulas: {
        siteName: function (get) {
            return get('data')[0].value;
        },

        lang: function (get) {
            return get('data')[1].value;
        }
    }
});

我从服务器得到的答案是这样的：

{"data":[{"name":"siteName","value":"Some site name"},{"name":"lang","value":"en"}]}

（我尝试了不同的版本，有根元素和 rootProperty，没有它，有 success 属性，我可以改变格式 - 这不是问题）。

结果总是一样的：空字段。问题似乎是异步查询，因为它与内存存储一起工作得很好。但是我不知道如何 "wait" 进行查询并从 json 中获取值，然后我可以在哪里放置 "load" listener.

我也尝试了 "links:" 和 "reference" 而不是 "stores:" 但是我在字段中得到了 [object Object] 并且不知道我能用它做什么.

我解决问题的尝试至少是正确的吗？如何在我的表单中正确显示 json 字符串中的内容？

PS: 这两天我在 Whosebug 和 sencha 论坛上阅读了很多有类似问题的东西，但我无法真正使用建议的解决方案来解决我的问题，很抱歉，如果我不这样做不明白的东西。谢谢。

Answer 1

我认为你的 JSON 的形成方式是导致你出现问题的原因。表单希望能够直接绑定到命名字段，在您的例子中是名称/值，而不是字段的实际值。

为了能够将数据加载到表单中并编辑/保存它，如果您的 JSON 是这种格式会容易得多：

{
   "siteName": "some sites name",
   "lang": "en" 
}

要使用您在上面提供的格式的数据，我认为可编辑网格更合适且更易于使用：

Ext.application({
    name: 'MyApp',

    launch: function() {
        Ext.define('WpOption', {
            extend: 'Ext.data.Model',
            idProperty: 'name',

            fields: [
                {name: 'id', type: 'int'},
                {name: 'name', type: 'string'},
                {name: 'value', type: 'string'}
            ]
        });

        var store = new Ext.data.JsonStore({
            // store configs
            storeId: 'myStore',
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: '/data/data5.json',
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                }
            },

            model: "WpOption",
            listeners: {
                "load": function() {
                    console.log(this.getCount());
                }
            }

        });

        Ext.create('Ext.grid.Panel', {
            title: 'Testing',
            store: store,
            columns: [
                { text: 'Name',  dataIndex: 'name', flex: 1 },
                { text: 'Phone', dataIndex: 'value', flex: 1,
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                }
            ],
            plugins: {
                ptype: 'cellediting',
                clicksToEdit: 1
            },
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        });
    }
});

// data/data5.json - I added an ID field, which would be needed for editing

{
    "data": [
        {
            "id": 1,
            "name": "siteName",
            "value": "Some site name"
        },
        {
            "id": 2,
            "name": "lang",
            "value": "en"
        }
    ]
}

下面的链接应该很适合您的问题：

祝项目顺利，如果我遗漏了什么，请在评论中告诉我，我会更新答案

使用 extjs5 中的视图模型将 json 字符串中的一组值放入表单中

Put set of values from a json string into the form using view model in extjs5

extjs

extjs5