PDA

View Full Version : help checking my ExtJS code



s2xi
12 May 2010, 5:40 AM
Hi guys,

So i got this login form going, but when I load it in FireFox firebug keeps complaining about my html: item

also, if I remove the html: item altogether then run it, I then get an error about the ext-all.js being incorrect.

with html item: loaded I get this error:

unterminated string literal
html: '<div class="app-msg">\n
at: index2.php
line: 7
without the error the page loads fine, but when I hit the submit button I get this:

missing ) in parenthetical
<script type="text/javascript" src="/resources/js/ext/ext-base.js"></script>\n
at: ext-all.js
line: 9
here is my code:

Ext.QuickTips.init();

var loginForm = { xtype: 'form',
id: 'logForm',
bodyStyle: 'padding:15px;',
background: 'transparent',
border: false,
url:'index2.php',
items: [{
xtype: 'box',
autoEl: { tag: 'div'},
/*html: '<div class="app-msg">
<img src="/resources/images/logo.png" class="app-img" />
Log in to your account</div>'*/
},
{ xtype: 'textfield',
id: 'user_name',
fieldLabel: 'Username',
allowBlank: false,
blankText: 'Enter your username'
},
{ xtype: 'textfield',
id: 'password',
fieldLabel: 'Password',
inputType: 'password',
allowBlank: false,
minLength: 5,
minLenghtText: 'Password must be at least 5 characters'
}],
buttons: [{
text: 'Login',
handler: function() {
Ext.getCmp('logForm').getForm().submit();
}
},
{
text: 'Cancel',
handler: function() {
win.hide();
}
}]
}

Ext.onReady(function() {
win = new Ext.Window({
layout: 'form',
width: 350,
autoHeight: true,
resizable: false,
closeAction: 'hide',
modal: true,
items: [loginForm]
})
win.show();
});

bruijn88
12 May 2010, 5:50 AM
String literals cannot contain newlines in javascript.
try:



var loginForm = {
xtype: 'form',
id: 'logForm',
bodyStyle: 'padding:15px;',
background: 'transparent',
border: false,
url:'index2.php',
items: [{
xtype: 'box',
autoEl: { tag: 'div'},
html: ['<div class="app-msg">',
'<img src="/resources/images/logo.png" class="app-img" />',
'Log in to your account</div>'].join('')
}, {
xtype: 'textfield',
id: 'user_name',
fieldLabel: 'Username',
allowBlank: false,
blankText: 'Enter your username'
}, {
xtype: 'textfield',
id: 'password',
fieldLabel: 'Password',
inputType: 'password',
allowBlank: false,
minLength: 5,
minLenghtText: 'Password must be at least 5 characters'
}],
buttons: [{
text: 'Login',
handler: function() {
Ext.getCmp('logForm').getForm().submit();
}
}, {
text: 'Cancel',
handler: function() {
win.hide();
}
}]
}

Zogs

jtpacheco
12 May 2010, 6:44 AM
Seconding this. You need to either throw everything in one line (split by <br/>'s) or do as bruijn88 says and create an array, with each line as a separate item, then join it at the end with a divider of "".

EDIT: you may be able to get away with
html : '<div class="app-msg">'+
'<img src="/resources/images/logo.png" class="app-img" />'+
'Log in to your account</div>'

I think as long as it is seen as a contiguous string ("a"+"b"+"c" = "abc"), it should work. The issue with the original posting is that javascript does not require lines to be terminated with a semicolon, so you can leave the end of the line empty. Trouble with that is once the compiler sees the end of a line, it completes that line, and anything after it (even if enclosed in quotes) is treated as a separate line.

So for future reference, if you have a string that you want to span over multiple lines, either use the array and join method, or enclose each line in quotes and add a + at the end of each line.

s2xi
12 May 2010, 7:17 AM
oh, i didn't think about the '+' jtpacheco.

I tried the method bruijn88 did, that did the trick!

well, after that hurdle I'm still getting my second error.

What do you think could be cause of that?

jtpacheco
12 May 2010, 7:20 AM
Nothing sticks out from the code...

For debugging purposes, comment out the ext-base include and include the ext-debug version instead. It gives a much more readable version of the "behind the scenes" ext code, and will allow you to actually see the line that the error occurred. It will usually allow you to accurately infer where in your own code the error may have occurred.

EDIT: also, just noticed this, the reason it broke when you commented out the html : <stuff> section is because of the trailing comma at the end of the line above it. The compiler is looking for the next property/config line when a line ends in a comma, and if it can't find one, it becomes unhappy and throws errors :)

RE-EDIT: it shouldn't matter, but try adding a semicolon after the win's config, at the end of the line before win.show();

bruijn88
12 May 2010, 9:07 AM
Also, you're overnesting.

First, you create a form by:



var loginForm = {
xtype: 'form',
id: 'logForm',
...
}
The 'xtype' implies an Ext.form.FormPanel. Which is in itself a panel.

Then you create a window, also a panel, and stick the form in it:



win = new Ext.Window({
layout: 'form',
items: [loginForm],
...
});
So you now have a panel in a panel.

You can also get the items from the loginForm, and put them directly in the window.


var win = new Ext.Window({
layout: 'form',
width: 350,
autoHeight: true,
resizable: false,
closeAction: 'hide',
modal: true,
items: [{
xtype: 'box',
autoEl: {tag: 'div'},
html: ['<div class="app-msg">',
'<img src="/resources/images/logo.png" class="app-img" />',
'Log in to your account</div>'].join('')
}, {
xtype: 'textfield',
id: 'user_name',
fieldLabel: 'Username',
allowBlank: false,
blankText: 'Enter your username'
}, {
xtype: 'textfield',
id: 'password',
fieldLabel: 'Password',
inputType: 'password',
allowBlank: false,
minLength: 5,
minLenghtText: 'Password must be at least 5 characters'
}],
buttons: [{
text: 'Login',
handler: function() {/*..*/}
}, {
text: 'Cancel',
handler: function() {/*..*/}
}]
})
win.show();

s2xi
12 May 2010, 10:52 AM
hmmm, ya I see. Hey, I tried your modified code as it looks cleaner and like you said I have over nested my code. And I see what you mean by that.

But when I run it, it runs great just on the submit handler i get the error that the .getForm() isn't defined.

Am I missing something?

Ext.getCmp("logForm").getForm is not a function
handler: function() { Ext.getCmp('logForm').getForm().submit();}

I gave the window an id: of logForm btw

bruijn88
12 May 2010, 11:23 AM
But when I run it, it runs great just on the submit handler i get the error that the .getForm() isn't defined.
That's correct, you no longer created a FormPanel, so getForm() doesn't exist anymore.
You have to manually get the values from the formfields and submit them.
No worries, it's not that hard.

I made a small example:


Ext.onReady(function () {
var win = new Ext.Window({
layout: 'form',
width: 350,
autoHeight: true,
resizable: false,
closeAction: 'hide',
modal: true,
items: [{
xtype: 'textfield',
id: 'user_name',
fieldLabel: 'Username',
allowBlank: false,
blankText: 'Enter your username'
}, {
xtype: 'textfield',
id: 'password',
fieldLabel: 'Password',
inputType: 'password',
allowBlank: false,
minLength: 5,
minLenghtText: 'Password must be at least 5 characters'
}],
buttons: [{
text: 'Login',
handler: function (btn, evt) {
var win = this.ownerCt.ownerCt, // 'this' refers to the button
params = {
username: win.get(0).getValue(),
password: win.get(1).getValue()
};
Ext.Ajax.request({
url: 'login.php',
params: params,
success: function (reponse, opts) {/*..*/}, // This means you have a successful http-response (status 200). It has nothing to do with successful or failed login. You have to interrogate 'response' to find that out
failure: function (reponse, opts) {/*..*/} // Something in the request went boo-boo
});
}
}, {
text: 'Cancel',
handler: function (btn, evt) {
var win = this.ownerCt.ownerCt;
win.close();
}
}]
})
win.show();
});
Cheers,
Zogs

s2xi
12 May 2010, 6:18 PM
Hmmm, well I got it working I think, only thing is now that when it sends the data to my login.php which validates the information inputted by the user then redirects me to the account.php.

But as I guess the script does all the bouncing around I get an error when parsing the HTML content on the account.php.

Keeps telling me ext is at fault. Why does it do this? shouldn't the script end when its redirected?

XML tag name mismatch (expected meta)
</head>\n
at: ext-all.js
line: 33

I loaded ext-base-debug.js to see what I get

bruijn88
13 May 2010, 2:58 AM
shouldn't the script end when its redirected?No it shouldn't because its an ajax request. Redirecting it just causes it to send to html of account.php to be sent back as a response. So you cannot redirect in the 'traditional sense'.
You might want to send the result of the login attempt as json and handle the result in the callback.

login.php


<?php

// login assertion
$success = assertCredentials($_POST['username'], $_POST['password']);

// send response
header('Content-Type: application/json');
echo json_encode(array('success' => $success));


// <snip>
Ext.Ajax.request({
url: 'login.php',
params: params,
success: function (reponse, opts) {
var o;
try {
o = Ext.decode(response.responseText);
if(o.success) {
document.location = 'account.php';
}
} catch (e) {
// reponse is not (valid) json, something went fubar
}
},
failure: function (reponse, opts) {/*..*/} // Something in the request went boo-boo
});
// <snip>