javascript 如何使用数据存储用 JSON 数据填充表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6213814/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to populate form with JSON data using data store?
提问by Davor Zubak
How to populate form with JSON data using data store? How are the textfields connected with store, model?
如何使用数据存储用 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
JSON
[
{"naziv":"Lisa", "oib":"2545898545", "email":"[email protected]"}
]
回答by Abdel Raoof
The field names of your model and form should match. Then you can load the form using loadRecord(). For example:
您的模型和表单的字段名称应该匹配。然后您可以使用loadRecord(). 例如：
var record = Ext.create('XYZ',{
name: 'Abc',
email: '[email protected]'
});
formpanel.getForm().loadRecord(record);
or, get the values from already loaded store.
或者，从已加载的商店中获取值。
回答by Johan van de Merwe
The answer of Abdel Olakara works great. But if you want to populate without the use of a store you can also do it like:
Abdel Olakara 的回答非常有效。但是，如果您想在不使用商店的情况下进行填充，您也可以这样做：
var record = {
data : {
group : 'Moody Blues',
text : 'One of the greatest bands'
}
};
formpanel.getForm().loadRecord(record);
回答by catalinux
I suggest you use Ext Direct methods. This way you can implement very nice and clean all operations: edit, delete, etc.
我建议您使用 Ext Direct 方法。通过这种方式，您可以实现非常好的和清理所有操作：编辑、删除等。
