PDA

View Full Version : Submit Button on a form without using AJAX



mpacker
10 Jun 2013, 1:12 PM
Hi all,
Pardon the newbie questions but I've done of ton of digging here to not much avail.

I'm following the examples in Learning ExtJS 4 book by C.Villa and A.Gonzalez and seemed to have come to a standing halt.


==================

My problem is that I'm trying to add a button to the form that does a non-ajax submit to a java servlet. Any attempts at using the examples on this site/ google seems to result in either no action or the form not being rendered.

Your help would be much appreciated and thanks in advance. (below is my code)
======================

Ext.define('MyApp.view.FmMediaScreen',{
extend : 'Ext.form.Panel',
alias : 'widget.FmMediaScreen',
collapsible: true,


title : 'Camp Criteria',
width : 228,
height: 570,
bodyPadding : 3,
align: "center",


initComponent : function(){
var me = this;
me.items = me.buildItems();
me.callParent();
},


buildItems : function(){

var segroup = Ext.create('Ext.form.CheckboxGroup',{
//fieldLabel : 'Sex',
//columns : 2,
//border: 2,
flex : 1,
//frame: true,
items : [
{name:'gender',boxLabel:'Males',inputValue:'M'},
{name:'gender',boxLabel:'Female',inputValue:'F'}
]
});



var agegroup = Ext.create('Ext.form.CheckboxGroup',{
columns : 2,
flex : 1,
items : [
{name:'age',boxLabel:'13-17',inputValue:'1317'},
{name:'age',boxLabel:'18-24',inputValue:'1824'},
{name:'age',boxLabel:'55-64',inputValue:'5564'},
{name:'age',boxLabel:'65+',inputValue:'65'}
]
});


var timeframe = Ext.create('Ext.form.CheckboxGroup',{
columns : 2,
border: 2,
items : [
{name:'timeframe',boxLabel:'Jan 01-05',inputValue:'01010105'},
{name:'timeframe',boxLabel:'Jan 06-12',inputValue:'01060112'},
{name:'timeframe',boxLabel:'Jan 13-19',inputValue:'01130119'}
]
});



var houseincome = Ext.create('Ext.form.CheckboxGroup',{
columns : 2,
border: 2,
items : [
{name:'hhi',boxLabel:'< $25 K',inputValue:'0-25'},
{name:'hhi',boxLabel:'$25K-$50K',inputValue:'25-50'},
{name:'hhi',boxLabel:'$50K-$75K',inputValue:'50-75'},
{name:'hhi',boxLabel:'$75K-$100K',inputValue:'75-100'},
{name:'hhi',boxLabel:'$100K +',inputValue:'100-INF'}
]
});



var location = Ext.create('Ext.form.CheckboxGroup',{
columns : 2,
border: 2,
items : [
{name:'location',boxLabel:'All Countries',inputValue:'ALL'},
{name:'location',boxLabel:'USA & Canada',inputValue:'USCAD'},
{name:'location',boxLabel:'USA',inputValue:'US'}
]
});


var quality = Ext.create('Ext.form.CheckboxGroup',{
columns : 2,
border: 2,
items : [
{name:'quality',boxLabel:'Premium',inputValue:'P'},
{name:'quality',boxLabel:'Standard',inputValue:'S'}
]
});


var btn1 = Ext.create("Ext.button.Button",{
name : "submit",
text : "submit",
scale : 'medium',
width : 100,
style: {
marginTop:"10px",
marginLeft:"63px",
},

handler: function() {

Ext.Ajax.request({
standardSubmit: true,
url: 'http://10.1.1.1/fm/servlets/LevelOServlet',
method: 'GET',
});
}
});


return [segroup,agegroup,timeframe,houseincome,location,quality];
},


});

Songle
10 Jun 2013, 9:06 PM
Hi mpaker,

firstly, next time please enclose your code in code tags for readability.

I'm confused at your statement that you are trying to do a "non-ajax submit" but the handler on your button is using Ext.Ajax.request. If you could explain that a little better I might be able to help.

I did notice, however, that while you created btn1 you never did anything with it.

mpacker
11 Jun 2013, 7:54 AM
Thanks for replying Songle..

Will certainly wrap code the next time I post. I was looking to do a SUBMIT, but the only way I could get it to work was by using AJAX. I've since discovered that I could just do


var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
....
....


and set standardSubmit: true, to make it work.

You are correct, I didn't make use of btn1

Thanks again.