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）调用相匹配的函数。

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

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

我已经将Example Fiddle组合在一起显示了这一点。我只是嘲笑了数据的加载和'metachange'事件，因为它更容易让演示工作。

Extjs使用json store创建表单项

1 个答案: