javascript - 如何使用数据存储使用 JSON 数据填充表单？

Question

如何使用数据存储使用 JSON 数据填充表单？文本字段如何与商店、模型相关联？

Ext.define('app.formStore', {
extend: 'Ext.data.Model',
fields: [
   {name: 'naziv', type:'string'},
   {name: 'oib', type:'int'},
   {name: 'email', type:'string'}
]
});

var myStore = Ext.create('Ext.data.Store', {
model: 'app.formStore',
proxy: {
    type: 'ajax',
    url : 'app/myJson.json',
    reader:{ 
        type:'json'                     
    }
},
autoLoad:true   
});

Ext.onReady(function() {


var testForm = Ext.create('Ext.form.Panel', {
                    width: 500,
                    renderTo: Ext.getBody(),
                    title: 'testForm',
                    waitMsgTarget: true,
                    fieldDefaults: {
                        labelAlign: 'right',
                        labelWidth: 85,
                        msgTarget: 'side'
                    },
                    items: [{
                        xtype: 'fieldset',
                        title: 'Contact Information',
                        items: [{
                                xtype:'textfield',
                                fieldLabel: 'Name',
                                name: 'naziv'
                            }, {
                                xtype:'textfield',
                                fieldLabel: 'oib',
                                name: 'oib'
                            }, {
                                xtype:'textfield',
                                fieldLabel: 'mail',
                                name: 'email'
                        }]
                    }]

            });

    testForm.getForm().loadRecord(app.formStore);
 });

JSON

[
    {"naziv":"Lisa", "oib":"2545898545", "email":"lisa@simpson.com"}        
]

Answer 1

您的模型和表单的字段名称应该匹配。然后您可以使用loadRecord(). 例如：

var record = Ext.create('XYZ',{
    name: 'Abc',
    email: 'abc@abc.com'
});
formpanel.getForm().loadRecord(record);

或者，从已加载的存储中获取值。

Answer 2

Abdel Olakara 的回答效果很好。但是，如果您想在不使用商店的情况下进行填充，您也可以这样做：

var record = {
      data : {
         group : 'Moody Blues',
         text  : 'One of the greatest bands'
      }
};
formpanel.getForm().loadRecord(record);

Answer 3

我建议你使用 Ext Direct 方法。通过这种方式，您可以实现非常漂亮和干净的所有操作：编辑、删除等。