How to populate form with JSON data using data store?
How to populate form with JSON data using data store? How are the textfields connected with store, model?
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.g开发者_高级运维etForm().loadRecord(app.formStore);
});
JSON
[
{"naziv":"Lisa", "oib":"2545898545", "email":"lisa@simpson.com"}
]
The field names of your model and form should match. Then you can load the form using loadRecord()
. For example:
var record = Ext.create('XYZ',{
name: 'Abc',
email: 'abc@abc.com'
});
formpanel.getForm().loadRecord(record);
or, get the values from already loaded store.
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:
var record = {
data : {
group : 'Moody Blues',
text : 'One of the greatest bands'
}
};
formpanel.getForm().loadRecord(record);
I suggest you use Ext Direct methods. This way you can implement very nice and clean all operations: edit, delete, etc.
精彩评论