javascript - How to populate form with JSON data using data store? - Stack Overflow

admin管理员组

文章数量:1287583

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.getForm().loadRecord(app.formStore);
 });

JSON

[
    {"naziv":"Lisa", "oib":"2545898545", "email":"[email protected]"}        
]

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.getForm().loadRecord(app.formStore);
 });

JSON

[
    {"naziv":"Lisa", "oib":"2545898545", "email":"[email protected]"}        
]

• javascript
• json
• forms
• extjs4
• datastore

Share Improve this question Follow edited Jan 17, 2016 at 17:45 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 2, 2011 at 11:18 Davor ZubakDavor Zubak 4,7461414 gold badges6161 silver badges9595 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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: '[email protected]'
});
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.

本文标签： javascriptHow to populate form with JSON data using data storeStack Overflow