PDA

View Full Version : Putting a button inside html on a Panel



shibbywowdude
24 Oct 2010, 1:49 PM
I am trying to get the loginButton to be on the same line as the html that is inside of the FieldSet. What is happening is the loginButton is going down a row instead of staying on the same row.

I have attached an image of what it currently looks like. What I want it to do is have the loginButton on the right and the "Create Account" and "Forgot Password" on the left.


var usernameTextField = new Ext.form.TextField({
fieldLabel: 'Email',
allowBlank:false,
width: 145,
labelWidth: 20,
height: 20,
bodyStyle: 'padding: 0px 0px 0px 0px',
style: 'margin-bottom: 0px'
});

var passwordTextField = new Ext.form.TextField({
fieldLabel: 'Password',
inputType: 'password',
allowBlank:false,
width: 145,
labelWidth: 20,
height: 20,
bodyStyle: 'padding: 0px 0px 0px 0px',
style: 'margin-bottom: 0px'
});

var loginButton = new Ext.Button({
text: 'Login',
width: 50,
bodyStyle:'padding:0px 0px 0px 0px; margin 0px 0px 0px 0px;',
listeners:{
click: function(){
loggedIn();
}
}
});

var loginInfoFieldSet = new Ext.form.FieldSet({
border: false,
applyTo: 'user_box',
monitorValid: true,
maxHeight: 45,
bodyStyle: 'padding: 0px 0px 0px 0px',
style: 'margin-bottom: 0px',
items:[usernameTextField, passwordTextField, {html: '<tr><td><a href="new_account.php">Create New Account</a> | <a href="forgot_pass.php">Forgot Password?</a>'}, loginButton, {html: '</td></tr>'}]
});

Animal
24 Oct 2010, 1:55 PM
They should all be buttons in an fbar with a "->" between the left two buttons and the Login button.

shibbywowdude
30 Oct 2010, 2:27 PM
I think that I have done this and I have it looking correctly. But when I click the text links they do not do anything in every browser but IE9. Even if I take out the 'rel="shadowbox;width=300;height=250"' of each link it will still won't go to the page.

Here is my current code:


var usernameTextField = new Ext.form.TextField({
fieldLabel: 'Email',
allowBlank:false,
width: 130,
labelWidth: 18,
height: 18,
bodyStyle: 'padding: 0px 0px 0px 0px',
style: 'margin-bottom: 0px'
});

var passwordTextField = new Ext.form.TextField({
fieldLabel: 'Password',
inputType: 'password',
allowBlank:false,
width: 130,
labelWidth: 18,
height: 18,
bodyStyle: 'padding: 0px 0px 0px 0px',
style: 'margin-bottom: 0px'
});

var loginButton = new Ext.Button({
text: 'Login',
width: 50,
height: 20,
//renderTo: 'login_button',
bodyStyle:'padding:0px 0px 0px 0px; margin 0px 0px 0px 0px;',
listeners:{
click: function(){
loggedIn();
}
}
});

var createAccountButton = new Ext.Button({
bodyStyle:'padding:0px 0px 0px 0px; margin 0px 0px 0px 0px;',
html: '<a href="new_account.php" rel="shadowbox;width=300;height=250">Create New Account</a>'
});

var forgotPasswordButton = new Ext.Button({
bodyStyle:'padding:0px 0px 0px 0px; margin 0px 0px 0px 0px;',
html: '<a href="forgot_pass.php" rel="shadowbox;width=300;height=250">Forgot Password?</a>'
});

var loginInfoFieldSet = new Ext.form.FieldSet({
border: false,
applyTo: 'user_box',
monitorValid: true,
maxHeight: 45,
bodyStyle: 'padding: 0px 0px 0px 0px',
style: 'margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px',
buttons: [loginButton, '->', createAccountButton, '-', forgotPasswordButton],
items:[usernameTextField, passwordTextField]
});I was not sure what an 'fbar' was so I went with the 'FieldSet' thinking that is what you were talking about, but I could be wrong.

Animal
30 Oct 2010, 11:03 PM
html in a Button? It's a <button>!

If you want a link use a LinkButton (do a forum search)

Not sure what fbar is? Why not?

http://dev.sencha.com/deploy/dev/docs/?class=Ext.Panel&member=fbar

But this is all going down the wrong path anyway. Your app should not be navigating to other pages. It should be a single page app which loads application Components.

shibbywowdude
4 Nov 2010, 5:38 PM
Awwwwe yeah you are completely right I shouldn't be using a <button>, the LinkButton is more of what I need. I will see what I can come up with.

Also I am not loading to a new page I am loading to a "shadowbox" which is just an overlay.

Thanks for the help!

Animal
4 Nov 2010, 10:40 PM
Well all you need is an ordinary Button then. With a click handler.

shibbywowdude
8 Nov 2010, 3:59 PM
Alright I have everything working correctly except for one thing. In IE7 and IE8 it looks like the image that I attached. In IE9 it looks like the second image I attached which is correct and works great!

So I figure that it is a bug in EXT JS within IE7 and IE8, but it could be me.

Here is my code:


var usernameTextField = new Ext.form.TextField({
fieldLabel: 'Email',
allowBlank:false,
width: 130,
labelWidth: 18,
height: 18,
bodyStyle: 'padding: 0px 0px 0px 0px',
style: 'margin-bottom: 0px'
});

var passwordTextField = new Ext.form.TextField({
fieldLabel: 'Password',
inputType: 'password',
allowBlank:false,
width: 130,
labelWidth: 18,
height: 18,
bodyStyle: 'padding: 0px 0px 0px 0px',
style: 'margin-bottom: 0px'
});

var loginButton = new Ext.Button({
text: 'Login',
width: 50,
height: 20,
//renderTo: 'login_button',
bodyStyle:'padding:0px 0px 0px 0px; margin 0px 0px 0px 0px;',
listeners:{
click: function(){
loggedIn();
}
}
});

var createAccountButton = new Ext.Button({
html: '<a href="new_account.php">Create New Account</a>',
listeners:{
click: function(){
Shadowbox.open({player: 'iframe', content: 'new_account.php', width: 300, height: 250});
}
}
});

var forgotPasswordButton = new Ext.Button({
html: '<a href="forgot_pass.php">Forgot Password?</a>',
listeners:{
click: function(){
Shadowbox.open({player: 'iframe', content: 'forgot_pass.php', width: 300, height: 250});
}
}
});

var loginInfoFieldSet = new Ext.form.FieldSet({
border: false,
applyTo: 'user_box',
monitorValid: true,
maxHeight: 45,
bodyStyle: 'padding: 0px 0px 0px 0px',
style: 'margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px',
buttons: [loginButton, '->', createAccountButton, '-', forgotPasswordButton],
items:[usernameTextField, passwordTextField]
});Any ideas? I know it is something with CSS b/c if I put IE9 CSS rules on it looks fine but anything below it looks wrong.