Question

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

以下是选项的模型：

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类型的一组选项，并将其“传递”到视图中。

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

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"}]}

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

结果始终相同：空字段。问题似乎是异步查询，因为它适用于内存存储。但我不知道如何“等待”查询并从json获取值，然后我可以放置类似“load”监听器的内容。

我也试过“链接：”和“引用”而不是“商店：”但我在字段中得到[对象对象]并且不知道，我可以用它做什么。

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

PS：我已经在这两天读了很多关于StackOverflow和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字符串中的值集合放入表单中

1 个答案: