Loading a ExtJS Form with XML Store (using Reader) – By Arindam

A Extjs Form can be loaded without a store using just model. But sometimes for uniformity we prefer to lad by data store.

In the below example I will provide simple steps how this can be achieved.

What you need:

1) A data store.

2) A Model (referenced from data store)

3) A form panel

4) XML data (RESTful call or a xml flat file).

Store:

Ext.define(‘myStore’, {
extend:’Ext.data.Store’,
model: ‘myModel’,
proxy: {
type: ‘ajax’,
url: ‘/path/to/mydata.xml’,  // or a REST call
reader: {
type: ‘xml’,
totalRecords: ‘results’,
record: ‘row’,
root:’dataset’
}
},
autoLoad:true
});

Model:

Ext.define(‘myModel’, {
extend: ‘Ext.data.Model’,
fields: [‘name’, ‘dob’, ‘age’]
});

Form :

Ext.define(‘App.view.userform’, {
extend: ‘Ext.form.Panel’,
width:’100%’,
autoDestroy:true,
border:false,
title:’User Info’,
defaultType: ‘textfield’,
items:[{
labelWidth:150,
labelAlign:’right’,
fieldLabel:’Name of User’,
name:’name’,
width:500,
margin:’10 0 0 30′
},
{
labelWidth:150,
labelAlign:’right’,
fieldLabel:’DOB’,
name:’dob’,
width:500,
margin:’10 0 0 30′
},
{
labelWidth:150,
labelAlign:’right’,
fieldLabel:’Age’,
name:’age’,
width:500,
margin:’10 0 0 30′
}]

});

mydata.xml

<?xml version=”1.0″ encoding=”UTF-8″?>
<dataset>
<results>1</results>
<row>
<name>db_01282015_062050_v225.vidyo</name>
<dob>Wed Jan 28 1988</dob>
<age>27</age>
</row>
</dataset>

 

Now the place from where this from will be initiated:

var formobj=Ext.create(‘App.view.userform’,{

renderTo : ‘divid’

});

Key Code to load the data to the form:

(First create the store and then load it to the form)

 

var storeobj=Ext.create(‘myStore‘);
storeobj.on(‘load’, function(){
formobj.getForm().loadRecord(storeobj.getAt(0));
});

Note: getAt(0) is used because a form store can have only one data set. In case of grid having multiple record set, this will not be use. The store can be directly referred in Ext GRID.

Form doesn’t have a “store:” Config and hence has to be loaded using Store or only using model.

Thanks

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s