开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜