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

Posted 2023-02-26

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

【英文标题】：Put set of values from a json string into the form using view model in extjs5

【发布时间】：2015-01-03 21:26:11

【问题描述】：

我正在开发我的第一个 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"]

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

结果总是一样的：空字段。问题似乎是异步查询，因为它与内存存储一起工作得很好。但我不知道如何“等待”查询并从 json 中获取值，然后我可以在其中放置“加载”侦听器之类的东西。

我也尝试了“链接：”和“参考”而不是“商店：”，但我在字段中得到 [object Object] 并且不知道该怎么办。

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

PS：这两天我在 *** 和 sencha 论坛上阅读了很多类似问题的内容，但我无法真正使用建议的解决方案来解决我的问题，抱歉，如果我不明白某物。谢谢。

【问题讨论】：

也许你也有recordProperty。否则它假定“记录”而不是“数据”。所以recordProperty：“数据”

【参考方案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"
        
    ]

以下链接应该是您的问题的好读物：

Ext.grid.Panel Ext.grid.plugin.CellEditiing Ext.data.JsonStore Ext.form.Panel

祝项目好运，如果我错过了什么，请在 cmets 中告诉我，我会更新答案

【讨论】：

谢谢。我还没有完全采用您的解决方案，但感谢您的回答，我发现 extjs 提供了 propertyGrid，它正是我真正想要的。我将需要用于其他事情的表单，例如用户编辑。让我们看看我是否会摆脱这些表格。