Creating a button in EXTJs

Question

I have a login screen which has an ExtJs form panel with two button Login and Reset. Now, I'm trying to add another button below the lofin panel for a new user sign up. But the button goes out to the bottom of the screen and a scroll bar appears making the page look ugly!

I have these in my login.jsp file:

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-access.css">   
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="js/app.js"></script>

And this is my app.js file:

Ext.onReady(function(){
    Ext.QuickTips.init();
    var login = new Ext.FormPanel({
        labelWidth:100,
        frame:true,
        title:'Member Login',
        defaultType:'textfield',
        monitorValid:true,

        // Specific attributes for the text fields for username / password. 
        // The "name" attribute defines the name of variables sent to the server.
        items:[{
            fieldLabel:'Username',
            name:'loginUsername',
            allowBlank:false
        },{
            fieldLabel:'Password',
            name:'loginPassword',
            inputType:'password',
            allowBlank:false
        }],

        buttons: [{    
            text: 'New User Register',
            scale: 'medium',
            handler: function()
            {        
                login.getForm().doAction('standardsubmit',{
                    target : '_self',
                    method : 'POST',
                    standardSubmit:true,
                    formBind: false,
                    url: 'registration.jsp'
                })
            }
        },{
            text: 'Login',
            scale: 'medium',
            handler: function()
            {
                login.getForm().doAction('standardsubmit',{
                    target : '_self',
                    method : 'POST',
                    standardSubmit:true,
                    formBind: true,
                    url: 'index.jsp'
                })
            }
        },{
            text: 'Reset',
            scale: 'medium',
            handler: function(){
                login.getForm().reset();
            }
        }]
    });

    // This just creates a window to wrap the login form. 
    // The login object is passed to the items collection.       
    var win = new Ext.Window({
        layout:'fit',
        width:325,
        height:175,
        closable: false,
        resizable: false,
        plain: true,
        border: false,    

        items: [login]
    });
    win.show();    
});

I tried adding a new button using the Ext.Createat the end of the above one but it wouldn't work. I tried having the code in a separate js file and adding the script tag with src to the button file along with the panel file in a separate script tag and even that failed.

Can anybody help me out to create a separate button and my desired position? Any kind of help is appreciated. Thanks.

I've looked everywhere and I've tried everything I could, but I'm not able to come up with the answer.

NOTE: The code makes the question seem very long and big, but my main query and issue is at the top and bottom of the question.

JSFiddle would be helpful, it is hard to see just from the code what bothers you. — Miljen Mikic

Dayynissh Dayynissh · Accepted Answer · 2014-01-21T11:38:35

Im assuming you dont want to add the new button INSIDE the login panel because otherwise you could just add another button to your buttons list anyway. To add a button under your login panel and YET inside the window, do the following steps;

Put your form panel as an item inside a container
Add your button as a second item in the container after your form pannel
Add the container to your window as you did the panel to the window

Voilah! You could also try giving your window and 'id' such as 'id=loginWindow' and then calling the code

Ext.getCmp('loginWindow').add(
    {
     xtype:button,
     text:'Yay!'
     }
);

If you need more code specific help, feel free to message me. I know your feel bro <3

Creating a button in EXTJs

1 Answers