PDA

View Full Version : Trouble with BasicForm !



olakara
27 Nov 2007, 6:56 AM
Hi all,
I was trying to get a basic form implemented while studying the EXt 2.0.. I am stuck with a small issue. I have done coding to create a simple form with two text fields. When i submit the form i get the following error in the firebug:

o has no properties
if(o.waitMsg) { ----> this is at line 26946 in ext-all-debug.js file


Here is my code:

js file:



FormEx = function() {

var formPanelObject;
var myForm;
var fldTb1;
var buttonObject;

var successFunction = function(form,action) {
Ext.Msg.alert('Status', 'Good news!!!');
}

var failureFunction = function(form,action) {
Ext.Msg.alert('Status', 'Failed to get data onto the server');
}

var onButtonClick = function(button, event) {
//myForm.getEl().dom.submit();
myForm.doAction(Ext.form.Action.Submit,{waitMsg:'Message',waitTitle:'title',success:successFunction,failure:failureFunction});
}


return {

init: function() {
myForm = new Ext.form.BasicForm("form-panel", {url:'http://localhost:9090/Extstd/result.jsp',method:'GET'});
fldTb1 = new Ext.form.Field({applyTo:'form-tb1',name:'uname',inputType:'text'});
fldTb2 = new Ext.form.TextField({applyTo:'form-tb2',name:'pass',inputType:'text',value:'ss'});
buttonObject = new Ext.Button({applyTo:'form-but1',text:'Click',handler:onButtonClick});

myForm.add(fldTb1,fldTb2);
myForm.render();

}
};


}();



and my HTML:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="formtest.js"></script>
<script type="text/javascript">
Ext.onReady(FormEx.init,FormEx);
</script>
<title>Sample</title>
</head>
<body>
<div id="form-panel">
First Name : <input name="frst" id="form-tb1"/><br/>
<br/>
Last Name : <input name="last" id="form-tb2"/><br/>
<br/>
<div id="form-but1"></div>
</div>
</body>
</html>


Please let me know if i am building the form the right way. If possible please give me a simple working code.

27 Nov 2007, 7:29 AM
I'm sorry but I'm a stickler for coding standards: here is your form refactored.


return {

init: function() {
myForm = new Ext.form.FormPanel({
url:'http://localhost:9090/Extstd/result.jsp',
renderTo : 'form-panel',
method:'GET',
items : [
new Ext.form.TextField({
applyTo:'form-tb1',
name:'uname',
inputType:'text'
}),
new Ext.form.TextField({
applyTo:'form-tb2',
name:'pass',
inputType:'text',
value:'ss'
})
]
});
buttonObject = new Ext.Button({
renderTo:'form-but1',
text:'Click',
handler:onButtonClick
});
myForm.render();
}
};

27 Nov 2007, 7:32 AM
Second pass :


var successFunction = function(form,action) {
Ext.Msg.alert('Status', 'Good news!!!');
}

var failureFunction = function(form,action) {
Ext.Msg.alert('Status', 'Failed to get data onto the server');
}

var onButtonClick = function(button, event) {
//myForm.getEl().dom.submit();
// This is new \/ \/
myForm.form.submit(({
waitMsg:'Message',
waitTitle:'title',
success:successFunction,
failure:failureFunction
});


hope this helps :)