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

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'}
    ]
});

Model – FieldError

Ext.define('ExtMVC.model.FieldError',{
    extend: 'Ext.data.Model',
    fields: ['id', 'msg']
});

Model – State

Ext.define('ExtMVC.model.State',{
    extend: 'Ext.data.Model',
    fields: ['abbr', 'state']
});

Store – States

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']
    ]
});

View – Form

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'
    }]
    
 });   

View- Viewport

/**
 * 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);
    }
});

Controller

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');
            }
        });
	}   
});

App.js

Ext.application({
    name: 'ExtMVC',

    controllers: [
        'Contacts'
    ],

    autoCreateViewport: true
});

Página HTML

<html>
<head>
	<title>Ext JS 4 MVC Examples - loiane.com</title>

	<!-- Ext JS Files -->
	<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-debug.js"></script>
    
    <!-- App Files -->
    <script type="text/javascript" src="app.js"></script>
    
</head>
<body>
</body>
</html>

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: http://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!

Filed in: Ext JS 4 | Tags: ExtJS 4, ExtJS 4 MVC