Results 1 to 7 of 7

Thread: Putting a button inside html on a Panel

  1. #1

    Default Putting a button inside html on a Panel

    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.

    Code:
        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>'}]
                                                      });
    Attached Images Attached Images

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    They should all be buttons in an fbar with a "->" between the left two buttons and the Login button.

  3. #3

    Default

    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:

    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.

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    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/doc...el&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.

  5. #5

    Default

    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!

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Well all you need is an ordinary Button then. With a click handler.

  7. #7

    Default

    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:

    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.
    Attached Images Attached Images

Similar Threads

  1. Putting EditorGrid inside the window
    By poly.xtian in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 6 Oct 2010, 7:15 PM
  2. To Help: Putting a panel inside a tabpanel with scrollbar support
    By fulvius in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 23 Jan 2009, 2:32 AM
  3. putting Ext inside a sub-namespace
    By kangaroo in forum Community Discussion
    Replies: 5
    Last Post: 25 Aug 2008, 6:57 AM
  4. putting widgets inside InfoPanel
    By topcoder1 in forum Ext 1.x: User Extensions and Plugins
    Replies: 6
    Last Post: 27 Jul 2007, 12:33 PM
  5. Putting Dialog inside Overlay Container
    By fthamura in forum Community Discussion
    Replies: 0
    Last Post: 23 Jan 2007, 11:12 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •