开发者

How to populate form with JSON data using data store?

开发者 https://www.devze.com 2023-03-10 03:23 出处:网络
How to populate form with JSON data using data store? How are the textfields connected with store, model?

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

精彩评论

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