Exemplo ExtJS 4 MVC: XML Ajax Form

Mais um exemplo MVC de ExtJS 4 aqui no blog. Hoje vamos ver o código do exemplo Ajax with XML Forms.

Vamos ao código então!

Estrutura do Projeto

Model - Contact

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]
Ext.define('ExtMVC.model.Contact',{
extend: 'Ext.data.Model',
fields: [
{name: 'first', mapping: 'name > first'},
{name: 'last', mapping: 'name > last'},
'company',
'email',
'state',
{name: 'dob', type: 'date', dateFormat: 'm/d/Y'}
]
});
[/code]

Model - FieldError

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]
Ext.define('ExtMVC.model.FieldError',{
extend: 'Ext.data.Model',
fields: ['id', 'msg']
});
[/code]

Model - State

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]
Ext.define('ExtMVC.model.State',{
extend: 'Ext.data.Model',
fields: ['abbr', 'state']
});
[/code]

Store - States

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]
Ext.define('ExtMVC.store.States',{
extend: 'Ext.data.ArrayStore',

model: 'ExtMVC.model.State',

data: [
['AL', 'Alabama', 'The Heart of Dixie'],
['AK', 'Alaska', 'The Land of the Midnight Sun'],
['AZ', 'Arizona', 'The Grand Canyon State'],
['AR', 'Arkansas', 'The Natural State'],
['CA', 'California', 'The Golden State'],
['CO', 'Colorado', 'The Mountain State'],
['CT', 'Connecticut', 'The Constitution State'],
['DE', 'Delaware', 'The First State'],
['DC', 'District of Columbia', "The Nation's Capital"],
['FL', 'Florida', 'The Sunshine State'],
['GA', 'Georgia', 'The Peach State'],
['HI', 'Hawaii', 'The Aloha State'],
['ID', 'Idaho', 'Famous Potatoes'],
['IL', 'Illinois', 'The Prairie State'],
['IN', 'Indiana', 'The Hospitality State'],
['IA', 'Iowa', 'The Corn State'],
['KS', 'Kansas', 'The Sunflower State'],
['KY', 'Kentucky', 'The Bluegrass State'],
['LA', 'Louisiana', 'The Bayou State'],
['ME', 'Maine', 'The Pine Tree State'],
['MD', 'Maryland', 'Chesapeake State'],
['MA', 'Massachusetts', 'The Spirit of America'],
['MI', 'Michigan', 'Great Lakes State'],
['MN', 'Minnesota', 'North Star State'],
['MS', 'Mississippi', 'Magnolia State'],
['MO', 'Missouri', 'Show Me State'],
['MT', 'Montana', 'Big Sky Country'],
['NE', 'Nebraska', 'Beef State'],
['NV', 'Nevada', 'Silver State'],
['NH', 'New Hampshire', 'Granite State'],
['NJ', 'New Jersey', 'Garden State'],
['NM', 'New Mexico', 'Land of Enchantment'],
['NY', 'New York', 'Empire State'],
['NC', 'North Carolina', 'First in Freedom'],
['ND', 'North Dakota', 'Peace Garden State'],
['OH', 'Ohio', 'The Heart of it All'],
['OK', 'Oklahoma', 'Oklahoma is OK'],
['OR', 'Oregon', 'Pacific Wonderland'],
['PA', 'Pennsylvania', 'Keystone State'],
['RI', 'Rhode Island', 'Ocean State'],
['SC', 'South Carolina', 'Nothing Could be Finer'],
['SD', 'South Dakota', 'Great Faces, Great Places'],
['TN', 'Tennessee', 'Volunteer State'],
['TX', 'Texas', 'Lone Star State'],
['UT', 'Utah', 'Salt Lake State'],
['VT', 'Vermont', 'Green Mountain State'],
['VA', 'Virginia', 'Mother of States'],
['WA', 'Washington', 'Green Tree State'],
['WV', 'West Virginia', 'Mountain State'],
['WI', 'Wisconsin', "America's Dairyland"],
['WY', 'Wyoming', 'Like No Place on Earth']
]
});
[/code]

View - Form

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]
Ext.define('ExtMVC.view.contact.ContactForm' ,{
extend: 'Ext.form.Panel',
alias : 'widget.contactform',

frame: true,
title:'XML Form',
bodyPadding: 5,
waitMsgTarget: true,

fieldDefaults: {
labelAlign: 'right',
labelWidth: 85,
msgTarget: 'side'
},

items: [{
xtype: 'fieldset',
title: 'Contact Information',
defaultType: 'textfield',
defaults: {
width: 280
},
items: [{
fieldLabel: 'First Name',
emptyText: 'First Name',
name: 'first'
}, {
fieldLabel: 'Last Name',
emptyText: 'Last Name',
name: 'last'
}, {
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, {
xtype: 'combobox',
fieldLabel: 'State',
name: 'state',
store: 'States',
valueField: 'abbr',
displayField: 'state',
typeAhead: true,
queryMode: 'local',
emptyText: 'Select a state...'
}, {
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'dob',
allowBlank: false,
maxValue: new Date()
}
]
}],

buttons: [{
text: 'Load',
action: 'load'
}, {
text: 'Submit',
disabled: true,
formBind: true,
action: 'submit'
}]

});
[/code]

View- Viewport

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]
/**
* The main application viewport, which displays the whole application
* @extends Ext.Viewport
*/
Ext.define('ExtMVC.view.Viewport', {
extend: 'Ext.Viewport',
layout: 'fit',

requires: [
'ExtMVC.view.contact.ContactForm'
],

initComponent: function() {
var me = this;

Ext.apply(me, {
items: [
{
xtype: 'contactform',
reader : Ext.create('Ext.data.reader.Xml', {
model: 'ExtMVC.model.Contact',
record : 'contact',
successProperty: '@success'
}),
errorReader: Ext.create('Ext.data.reader.Xml', {
model: 'ExtMVC.model.FieldError',
record : 'field',
successProperty: '@success'
})
}
]
});

me.callParent(arguments);
}
});
[/code]

Controller

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]
Ext.define('ExtMVC.controller.Contacts', {
extend: 'Ext.app.Controller',

models: ['Contact', 'FieldError', 'State'],

stores: ['States'],

views: ['contact.ContactForm'],

refs: [{
ref: 'contactForm',
selector: 'contactform'
}],

init: function() {

this.control({
'contactform button[action=load]': {
click: this.loadFormData
},
'contactform button[action=submit]': {
click: this.submitFormData
}
});
},

loadFormData: function() {

this.getContactForm().getForm().load({
url: 'data/xml-form-data.xml',
waitMsg: 'Loading...'
});
},

submitFormData: function() {

this.getContactForm().getForm().submit({
url: 'data/xml-form-errors.xml',
submitEmptyText: false,
waitMsg: 'Saving Data...',

success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result ? action.result.msg : 'No response');
}
});
}
});
[/code]

App.js

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]
Ext.application({
name: 'ExtMVC',

controllers: [
'Contacts'
],

autoCreateViewport: true
});
[/code]

Página HTML

[code lang="html" firstline="1" toolbar="true" collapse="false" wraplines="false"]
<html>
<head>
<title>Ext JS 4 MVC Examples - loiane.com</title>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>

<script type="text/javascript" src="app.js"></script>

</head>
<body>
</body>
</html>
[/code]

Download do código fonte completo

Você pode fazer o download do código fonte completo através dos meu repositório do Github: https://github.com/loiane/extjs4-mvc-ajax-xml-form

Demo

Para ver esse projeto rodando, acesse o link: https://loiane.com/extjs/extjs4-mvc-ajax-xml-form/

Todos os exemplos ExtJS 4 MVC:

http://www.loiane.com/2012/03/exemplos-sencha-extjs-4-em-mvc/

Até o próximo exemplo! :)