如何使用数据存储填充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

阿卜杜勒奥拉卡拉的答案很好。但如果你想在没有使用商店的情况下进行填充，你也可以这样做：

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

Answer 3

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