Extjs 使用 json 存储创建表单项

Question

我已经创建了一个表单面板视图，我将在这个面板旁边创建一些表单项。与商店、控制器和模型的通信工作正常，但如何在视图中创建项目？

Json 数组（取自外部服务）：

{
"data": [
    {
        "name": "ff",
        "xtype": "textfield",
        "allowBlank": false,
        "fieldLabel": "labelText1"
    },
    {
        "name": "fsdsdf",
        "xtype": "textfield",
        "allowBlank": false,
        "fieldLabel": "labelText2"
    }
],
"msg": "Unknown",
"success": true
}

商店：

Ext.define('myApp.store.Forms', {
extend: 'Ext.data.Store',
alias: 'store.Form',
model: 'myApp.view.FormModel',

constructor: function(config) {
    var me = this;

    config = config || {};

    me.callParent([Ext.apply({
        autoLoad: true,

        proxy: {
            type: 'ajax',
            url: 'url_to_service',

            reader: {
                type: 'json',
                rootProperty: 'data',
                successProperty : 'success'
            }
        },        

        storeId: 'formStore'

    }, config)]);    

    // console.error("store loaded");
    // console.info(me);
}
});

型号

Ext.define('myApp.view.FormModel', {
extend: 'Ext.data.Model',

data: {
    name: 'myApp'
}
});

控制器

Ext.define('myApp.view.FormController', {
extend: 'Ext.app.ViewController',
alias: 'controller.form',

init: function(application) {
    var store = new myApp.store.Forms();

    store.on("metachange", metaChanged, this);

    function metaChanged(store, meta) {
        var grid = Ext.ComponentQuery.query('form')[0];
        grid.fireEvent('metaChanged', store, meta);
    };

    this.control({
        "form": {
            metaChanged: this.handleStoreMetaChange
        }
    });    
},

handleStoreMetaChange: function(store, meta) {
    var form = Ext.ComponentQuery.query('form')[0];
    form.reconfigure(store, meta.data);
}
});

至少是我想从商店创建商品的视图。

Ext.define('myApp.view.Form', {
extend: 'Ext.form.Panel',
xtype: 'form',

controller: "form",

viewModel: {
    type: "form"   
},

title: 'form',
bodyPadding: 10,
autoScroll: true,

defaults: {
    anchor: '100%',
    labelWidth: 100
},


// How can I add form items here? 


});

Answer 1

在您的视图中，您需要创建一个与您在控制器中进行的 form.reconfigure(store, meta.data) 调用相匹配的函数。

在该函数中，您可以调用表单的 add 函数将项目添加到表单中。由于您已经在数据结构中提供了 xtype 和配置参数，因此每个项目都可以传递给 add 函数。它看起来像下面的代码......

reconfigure: function(store, data) {                
    var me = this;
    Ext.each(data, function(item, index) {
        me.add(item);
    });
}

我已经拼凑了一个Example Fiddle，它表明这个工作正常。我只是模拟了数据的加载和 'metachange' 事件，因为它更容易让演示工作。