How to submit a form within Ext.extend(Ext.form.FormPanel ...

[Allan.Sormani]

How to submit a form within Ext.extend(Ext.form.FormPanel ...

I have been trying to deal with this for several days and no luck so far. Have been trying different tutorials and examples and nothing.

Here is my source:

App.views.HomeJoin = Ext.extend(Ext.form.FormPanel, {
	
	title: "Join Now",
	name: "myForm",
	id: "myForm",
	dockedItems: [
	        {xtype:'toolbar', title:'<div id="topBar-theme"><a href="" class="topLogo-Theme">&nbsp;</a><span class="topPhotos-theme">&nbsp;</span></div>'},
	        {
	        	xtype:'toolbar', 
	        	dock: 'bottom', 
	        	items: [
	        		{xtype: 'spacer'}, 
	        		{
	       				xtype:'button',
					ui:'confirm',
					width:'25%',
					text:'Login',
					align:'center',
					handler:function() {
						var form = App.views.HomeJoin.getValues();
						Ext.Msg.alert('Data:-> ' + form.username);
					}
	        		},
	        	]}
	        ],
	html: '<div class="animatedBanner-theme">&nbsp;</div>',
	items: [{
		scroll: 'vertical',
		width: 320,
		height: hfixA,
		autoHeight: true,
		defaults: {width: 290, height: 10, xtype: 'textfield', styleHtmlContent: true},
		items: [
			{
				defaults: { labelWidth: '35%' },
				xtype: 'fieldset',
				title: 'Registration Form',
				instructions: 'Please enter the information above.',
				items: [
					{
						inputType: 'hidden',
						id: 'someId-A',
						name: 'someNa-A',
						value: 'someVa-A',
					},
					{
						inputType: 'hidden',
						id: 'someId-B',
						name: 'someNa-B',
						value: 'someVa-B',
					},
					{
						inputType: 'hidden',
						id: 'someId-C',
						name: 'someNa-C',
						value: 'someVa-C',
					},
					{
						label: 'Username',
						name: 'username',
						xtype: 'textfield',
						autoCapitalize: 'false',
						allowBlank: 'false',
						required: 'true',
					},
					{
						label: 'Password',
						name: 'password',
						xtype: 'passwordfield',
						autoCapitalize: 'false',
						allowBlank: 'false',
						required: 'true',
					},
					{
						label: 'Email',
						name: 'email',
						xtype: 'emailfield',
						autoCapitalize: 'false',
						allowBlank: 'false',
						required: 'true',
					},
					{
						label: 'Zip',
						name: 'zipcode',
						xtype: 'numberfield',
						autoCapitalize: 'false',
						allowBlank: 'false',
						required: 'true',
					},
					{
						label: 'Country',
						name: 'country',
						xtype: 'selectfield',
						required: 'true',
						options: [
							{text: 'United States', value: 'US'},
							{text: 'Canada', value: 'CA'},
							{text: 'United Kingdom', value: 'GB'},
						]
					},
				]
			},
			{
				xtype: 'fieldset',
				title: 'Choose A Membership',
				instructions: '2 Day Pass ($1.00) &lt;br /&gt; 30 Days Pass ($39.95)',
				allowBlank: 'false',
				required: 'true',
				defaults: { xtype: 'radiofield', labelWidth: '35%' },
				items: [
				{
					name: 'membership',
					value: '134',
					label: '2 Days Pass',
				},
				{
					name: 'membership',
					value: '98',
					label: '30 Days Pass',
				},
				]
			},
			{
				xtype: 'fieldset',
				title: 'Payment',
				instructions: 'Choose A Payment Type Above',
				required: 'true',
				defaults: { xtype: 'radiofield', labelWidth: '35%' },
				items: [
				{
					name: 'paymenttype',
					value: 'CC',
					label: 'Credit Card',
				},
				{
					name: 'paymenttype',
					value: 'CH',
					label: 'Check',
				},
				]
			},
		],
	}]


});
Ext.reg('HomeJoin', App.views.HomeJoin);

If I use the following I can get the values for each field.

handler:function() {
	var form = document.getElementById('myForm');
	Ext.Msg.alert('Data:<br />Username-> ' + form.username.value + ' Password-> ' + form.password.value + 'Email-> ' + form.email.value + 'Zip_code-> ' + form.zipcode.value + 'Country-> ' + form.country.value);
}

... But Im sure this is not the right way to doit.

I'm kind of lost. I have been searching for a solution everywhere. If someone could share a bit of light that could help me, that will help me a lot.

BTW, I'm using TabBarMvc.js to be able to use text/images as links to point to a specific tab option. The form it's one of the tabs.

I just want to be able to send the data using ajax and verify the server response.

[jdruid]

Any updates on this one?

[Sasha172]

1. Create a model which contains all the field id and types that u need from the form
2. Create a store from that model (say 'App.stores.UserStore')
3. Give your form an id. Say

 id : 'formid'

4. Create a Save button or something that does the following :

xtype : 'button',
text : 'save'
ui : 'confirm',
handler : function () {
      Ext.dispatch({
             controller : 'contName',
             action : 'save',
             data : Ext.getCmp('formid).getValues()
      });
}

5. Create a controller and the respective save function :

Ext.regController("contName", {
        save : function(params){
               BReimb.stores.ListStore.create(params.data);
         }
});

Done ! Now you can access the respective store and pull the data into a list/form/panel etc
Hope this helps

[Mthor]

just replace your submit button with this, I just edited your handler

{
    xtype: 'button',
    ui: 'confirm',
    width: '25%',
    text: 'Login',
    align: 'center',
    scope: this,
    handler: function () {
        var values = this.getValues();

        Ext.Ajax.request({
            url: '',
            method: 'post',
            params: values,
            scope: this,
            failure: function (response) {

            },
            success: function (response, opts) {

            }
        });

    }
}