armaghedon
30 Jul 2007, 2:26 AM
Hello!!!
I have a problem with forms and Ext.data.xmlReader.
Here is the code:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var dialog, showBtn;
var RecordDef = Ext.data.Record.create([
{name: 'name', mapping: 'name'} // "mapping" property not needed if it's the same as "name"
]);
var loginForm = new Ext.form.Form({
method: "post",
labelAlign: 'left',
labelWidth: 60,
labelSeparator:' ',
hideLabels : true,
url:'login.jsp',
hideLabels:true,
monitorValid :true,
waitMsgTarget : true,
buttonAlign: 'center',
errorReader: new Ext.data.XmlReader({
success: "success", // The element which contains the total dataset size (optional)
record: "row", // The repeated element which contains row information
}, RecordDef)
});
loginForm.column(
{width:220, style:'margin-left:10px;margin-top:10px;',labelSeparator:'',id:'loginColumn'},
new Ext.form.TextField({
fieldLabel: 'username',
name: 'username',
width:120,
vtype: 'alphanum',
allowBlank:false,
autoBlank:false
}),
new Ext.form.TextField({
fieldLabel: 'Password',
name: 'pass',
id: 'pass',
inputType: 'password',
allowBlank:false,
width:120
}),
new Ext.form.Checkbox({
boxLabel:'<span id="labelLogin">Remember me</span>',
name:'remember_me',
checked:true,
id:'checkboxLogin'
})
);
var theLoginButton=loginForm.addButton('Login', function(){
loginForm.submit({
waitMsg:'Please Wait...',
reset:true
});
}, loginForm);
loginForm.on("actioncomplete", function(form,action) {
Ext.getDom('loginButton').style.display='none';
Ext.getDom('registerButton').style.display='none';
Ext.getDom('welcome').innerHTML='Welcome '+Ext.getDom('username').value;
Ext.getDom('welcome').style.display='';
Ext.getDom('logOut').style.display='';
Ext.getDom('userSettingsButton').style.display='';
dialog.destroy(true);
});
loginForm.on("actionfailed", function() {
Ext.MessageBox.alert("Login Failure!", "Incorrect username or password. You may try again, but be aware that all login attempts are logged and monitored.");
});
// create the LayoutLogin application (single instance)
var LayoutLogin = function(){
var toggleTheme = function(){
Ext.get(document.body, true).toggleClass('xtheme-gray');
};
// return a public interface
return {
init : function(){
showBtn = Ext.get('loginButton');
// attach to click event
showBtn.on('click', this.showDialog, this);
},
showDialog : function(){
if(!dialog){
// lazy initialize the dialog and only create it once\
dialog = new Ext.LayoutDialog("loginDialog", {
modal:true,
width:240,
height:160,
shadow:true,
resizable:false,
minWidth:240,
minHeight:160,
proxyDrag: true,
title:'Login',
center: {
autoScroll:false
}
});
var layout = dialog.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('diagcenter', {title: 'Login', closable: false}));
loginForm.render('login-form');
dialog.on('show', function(){loginForm.items.item(0).focus();loginForm.startMonitoring();});
layout.endUpdate();
}
dialog.show(showBtn.dom);
}
};
}();
// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
Ext.EventManager.onDocumentReady(LayoutLogin.init, LayoutLogin, true);
});
I've also attached the dialog where I render this form(which is not relevant for this topic) for the users that would find this example useful.
I add also the code from the file that processes the submitted data:
login.jsp
<%@page contentType="text/xml"%><%
response.setHeader("Content-type","text/xml");
if(request.getParameter("username")!=null)
if(request.getParameter("username").equals("mace"))
out.write("<?xml?><dataset><success>true</success><row><name>mace</name></row></dataset>");
else{
out.write("<?xml?><dataset><success>false</success><row><name>guest</name></row></dataset>");
};
%>
PS: out.write from Java Server Pages(jsp) is the same as echo from PHP
The problem is that the code from this function
loginForm.on("actionfailed", function() {
Ext.MessageBox.alert("Login Failure!", "Incorrect username or password. You may try again, but be aware that all login attempts are logged and monitored.");
});
is never executed and it should be executed for any username except mace
I think I write something wrong in the XML response given by login.jsp or the errorReader is not correctly defined because if I delete errorReader so it uses the default JSON Reader and
the code from login.jsp is redefined as :
if(request.getParameter("username")!=null)
if(request.getParameter("username").equals("mace")){
out.write("{success:true, username:mace}\n");
}
else{
out.write("{success:false,username:guest}\n");
};
it works as expected.
Any suggestion is very important for me and thank you for reading this thread
I have a problem with forms and Ext.data.xmlReader.
Here is the code:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var dialog, showBtn;
var RecordDef = Ext.data.Record.create([
{name: 'name', mapping: 'name'} // "mapping" property not needed if it's the same as "name"
]);
var loginForm = new Ext.form.Form({
method: "post",
labelAlign: 'left',
labelWidth: 60,
labelSeparator:' ',
hideLabels : true,
url:'login.jsp',
hideLabels:true,
monitorValid :true,
waitMsgTarget : true,
buttonAlign: 'center',
errorReader: new Ext.data.XmlReader({
success: "success", // The element which contains the total dataset size (optional)
record: "row", // The repeated element which contains row information
}, RecordDef)
});
loginForm.column(
{width:220, style:'margin-left:10px;margin-top:10px;',labelSeparator:'',id:'loginColumn'},
new Ext.form.TextField({
fieldLabel: 'username',
name: 'username',
width:120,
vtype: 'alphanum',
allowBlank:false,
autoBlank:false
}),
new Ext.form.TextField({
fieldLabel: 'Password',
name: 'pass',
id: 'pass',
inputType: 'password',
allowBlank:false,
width:120
}),
new Ext.form.Checkbox({
boxLabel:'<span id="labelLogin">Remember me</span>',
name:'remember_me',
checked:true,
id:'checkboxLogin'
})
);
var theLoginButton=loginForm.addButton('Login', function(){
loginForm.submit({
waitMsg:'Please Wait...',
reset:true
});
}, loginForm);
loginForm.on("actioncomplete", function(form,action) {
Ext.getDom('loginButton').style.display='none';
Ext.getDom('registerButton').style.display='none';
Ext.getDom('welcome').innerHTML='Welcome '+Ext.getDom('username').value;
Ext.getDom('welcome').style.display='';
Ext.getDom('logOut').style.display='';
Ext.getDom('userSettingsButton').style.display='';
dialog.destroy(true);
});
loginForm.on("actionfailed", function() {
Ext.MessageBox.alert("Login Failure!", "Incorrect username or password. You may try again, but be aware that all login attempts are logged and monitored.");
});
// create the LayoutLogin application (single instance)
var LayoutLogin = function(){
var toggleTheme = function(){
Ext.get(document.body, true).toggleClass('xtheme-gray');
};
// return a public interface
return {
init : function(){
showBtn = Ext.get('loginButton');
// attach to click event
showBtn.on('click', this.showDialog, this);
},
showDialog : function(){
if(!dialog){
// lazy initialize the dialog and only create it once\
dialog = new Ext.LayoutDialog("loginDialog", {
modal:true,
width:240,
height:160,
shadow:true,
resizable:false,
minWidth:240,
minHeight:160,
proxyDrag: true,
title:'Login',
center: {
autoScroll:false
}
});
var layout = dialog.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('diagcenter', {title: 'Login', closable: false}));
loginForm.render('login-form');
dialog.on('show', function(){loginForm.items.item(0).focus();loginForm.startMonitoring();});
layout.endUpdate();
}
dialog.show(showBtn.dom);
}
};
}();
// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
Ext.EventManager.onDocumentReady(LayoutLogin.init, LayoutLogin, true);
});
I've also attached the dialog where I render this form(which is not relevant for this topic) for the users that would find this example useful.
I add also the code from the file that processes the submitted data:
login.jsp
<%@page contentType="text/xml"%><%
response.setHeader("Content-type","text/xml");
if(request.getParameter("username")!=null)
if(request.getParameter("username").equals("mace"))
out.write("<?xml?><dataset><success>true</success><row><name>mace</name></row></dataset>");
else{
out.write("<?xml?><dataset><success>false</success><row><name>guest</name></row></dataset>");
};
%>
PS: out.write from Java Server Pages(jsp) is the same as echo from PHP
The problem is that the code from this function
loginForm.on("actionfailed", function() {
Ext.MessageBox.alert("Login Failure!", "Incorrect username or password. You may try again, but be aware that all login attempts are logged and monitored.");
});
is never executed and it should be executed for any username except mace
I think I write something wrong in the XML response given by login.jsp or the errorReader is not correctly defined because if I delete errorReader so it uses the default JSON Reader and
the code from login.jsp is redefined as :
if(request.getParameter("username")!=null)
if(request.getParameter("username").equals("mace")){
out.write("{success:true, username:mace}\n");
}
else{
out.write("{success:false,username:guest}\n");
};
it works as expected.
Any suggestion is very important for me and thank you for reading this thread