Load FormPanel with DataStore Data

var form = new Ext.form.FormPanel({
    items: [
        {
            xtype: 'textfield',
            name : 'first',
            label: 'First name'
        },
        {
            xtype: 'textfield',
            name : 'last',
            label: 'Last name'
        },
        {
            xtype: 'numberfield',
            name : 'age',
            label: 'Age'
        },
        {
            xtype: 'urlfield',
            name : 'url',
            label: 'Website'
        }
    ]
});

Get form value:

var fields = form.getValues();
console.log(fields['first']);

Ext.regModel('User', {
    fields: [
        {name: 'first', type: 'string'},
        {name: 'last',  type: 'string'},
        {name: 'age',   type: 'int'},
        {name: 'url',   type: 'string'}
    ]
});

var user = Ext.ModelMgr.create({
    first: 'Ed',
    last : 'Spencer',
    age  : 24,
    url  : 'http://extjs.com'
}, 'User');

form.load(user);

Note:
- Ext.regModel( ) is a shortcut of Ext.ModelMgr.registerType( )


Types of Data Store

//1. Session Storage
var cart = Ext.data.Store({ 
  model: 'product',
  proxy:{
     type: 'sessionstorage', 
     id: 'shoppingCart'
  }
});

//2. Local Storage
var cart = Ext.data.Store({ 
  model: 'product',
  proxy:{
     type: 'localstorage', 
     id: 'shoppingCart'
  }
});

//3. ajax or scripttag
var cart = Ext.data.Store({ 
  model: 'product',
  proxy:{
     type: 'ajax', 
     url: .....,
     reader: { type: ..., root: ....}
  }
});