PDA

View Full Version : Problem with simple form and submit.



flymantang
22 Nov 2007, 10:01 PM
Hi.
I'm having a problem with the submit button in a form. It doesn't seem to be triggering any event when the button is pressed. I'm pretty new to ExtJs but I've looked at the tutorials and postings from other people but I still cannot figure it out and that's why I decided to post my problem. Can someone spot the error?

Thanks!



Ext.onReady(function(){

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

var bd = Ext.getBody();
var simple = new Ext.FormPanel({
//var simple = new Ext.form.Form({
labelWidth: 75, // label settings here cascade unless overridden
method: 'GET',
url: 'create.php',
frame:true,
title: 'User Login',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'User',
name: 'user',
allowBlank:false
},{
fieldLabel: 'Password',
name: 'pass',
allowBlank:false
}],

buttons: [{
text: 'Login',
handler: function() {
simple.getForm().submit({
url:'create.php',
});
}
}]
});
simple.render(document.body);
});


<html>
<head>
<title>ProtoPage</title>

<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="/ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext2/ext-all.js"></script>
<script type="text/javascript" src="index.js"></script>

<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="/ext2/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="forms.css"/>

</head>
<style type="text/css">
<!--
.style1 {font-family: "Courier New", Courier, monospace}
.style2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
-->
</style>
<body>
<p class="style2">Test Page </p></br>
</body>
</html>

tryanDLS
23 Nov 2007, 9:15 AM
Does firebug show the submit request being made?

flymantang
23 Nov 2007, 10:23 PM
My mistake. I should have installed Firebug to verify that it was not making the requests before posting. Now that I can see that it is working, I have another question.

The response from the check is a JSON array. How can I access the data and grab an important value from the data. For example, a successful login will generate a response like this: {"success":"true","value":{"id":"2"}}. I want to grab the id value which is 2. I've done some searching and there are some threads regarding this matter but it was for the 1.0 release. :P

What I would like to do is grab the id and pass it into the main.php. I want to stay away from sessions at this point since it is not the main focus of my project. Thanks for the help!


buttons: [{
text: 'Login',
handler: function() {
simple.getForm().submit({
url:'check.php',
success: function(form, action){
Ext.MessageBox.alert('Logged in', 'Login successful');
//TODO extracting ID goes here
//window.location.href = 'http://localhost/main.php';
},
failure: function(form, action){
Ext.MessageBox.show({
title:'Login error',
msg: 'Wrong user/password.',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
});
}
});
}
}]

flymantang
23 Nov 2007, 10:35 PM
Should I be using JsonReader to resolve this problem? If so, won't I have to setup the HttpProxy. But if I'm doing that then I would be making another request. /:)

I would like to extract the id value when a successful response comes back.

flymantang
23 Nov 2007, 11:55 PM
Ok, I can access action's responseText but I'm not sure how I can grab the id value.

EDIT: Never mind, I got it :D. I should not have been using responseText. Instead, I used the action.result object to access the JSON data.

tryanDLS
24 Nov 2007, 8:32 AM
Also, you should be returning

{success:true,....} <-boolean not string

flymantang
24 Nov 2007, 5:01 PM
Fixed. Thanks!

martialtiger
29 Nov 2007, 10:44 AM
Ok, I can access action's responseText but I'm not sure how I can grab the id value.

EDIT: Never mind, I got it :D. I should not have been using responseText. Instead, I used the action.result object to access the JSON data.

How do I go about using the action.result object? I'm not well versed in OOP/Javascript so I would appreciate an example of the syntax to use.

TIA

pludikhu
5 Dec 2007, 12:37 PM
How do I go about using the action.result object? I'm not well versed in OOP/Javascript so I would appreciate an example of the syntax to use.

TIA

It depends what you send from the server.
If you send back from the server: {success: false, reason:'This is why it fails'}

You can get at it with:



success:function(form, action){Ext.MessageBox.alert('Info', action.result.reason);}

This is: action(the second argument of the function).result.reason(the name of the variable you set on the server).

Hope this is clear?!