1. #1
    Sencha User
    Join Date
    Sep 2011
    Location
    Costa Rica
    Posts
    3
    Vote Rating
    0
    Allan.Sormani is on a distinguished road

      0  

    Exclamation Unanswered: How to submit a form within Ext.extend(Ext.form.FormPanel ...

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


    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:
    Code:
    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.
    Code:
    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.

  2. #2
    Sencha User
    Join Date
    Oct 2010
    Posts
    17
    Answers
    1
    Vote Rating
    0
    jdruid is on a distinguished road

      0  

    Default


    Any updates on this one?

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    119
    Answers
    11
    Vote Rating
    4
    Sasha172 is on a distinguished road

      0  

    Default


    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
    Code:
     id : 'formid'
    4. Create a Save button or something that does the following :

    Code:
    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 :

    Code:
    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

  4. #4
    Sencha Premium Member
    Join Date
    Nov 2007
    Location
    Moore, Oklahoma
    Posts
    473
    Answers
    9
    Vote Rating
    13
    Mthor will become famous soon enough

      0  

    Default


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

    Code:
    {
        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) {
    
                }
            });
    
        }
    }