login window example

HTML

<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/css/ext-all.css">

JavaScript

Ext.define('MyApp.view.Login', {
        extend: 'Ext.window.Window',
        height: 220,
        width: 490,
        layout: 'fit',
        modal: true,
        buttonAlign: 'left',
        closable: false,
        items: [
            {
                xtype: 'form',
                frame: false,
                border: 0,
                layout: {
                    type: 'hbox',
                    align: 'middle'
                },
                fieldDefaults: {
                    msgTarget: 'side',
                    labelWidth: 55
                },
                items: [
                    {
                      
                        layout: {
                            type: 'vbox',
                            align: 'stretch'
                        },
                        items: [
                            {
                                xtype: 'textarea',
                                name: 'username',
                                fieldLabel: 'Username',
                                allowBlank: false,
                                flex: 1
                            }
                            
                        ]
                    }
                ]
            }
        ],
        buttons: [
            {
                text: 'Login',
                handler: function () {
                    Ext.Msg.alert('This is not yet implemented.');
                }
            }
        ]
    });

Ext.create('MyApp.view.Login').show();