Extjs5.1学习模仿登录界面

Extjs5.1学习@jhui

背景

使用window 7 32位系统，也可以是linux 。
1.下载extjs 5.1.0的gpl版本的压缩文件。
2.解压到F:\xampp\htdocs\ 里面
3.F:\xampp\htdocs\目录下，新建hello_world.js 和hello_world1.html空白文件，等下编辑。

注意链接文件js和 css

使用了经典版的主题。
下面是hello_world1.html文件代码

同个文件目录下面新建hello_world.js，代码如下

var tpl = Ext.create('Ext.Template', [                                // 1
    'Hello {firstName} {lastName}!',
    ' Nice to meet you!'
]);


var formPanel = Ext.create('Ext.form.FormPanel', {
    itemId      : 'formPanel',
    frame       : true,
    layout      : 'anchor',
    defaultType : 'textfield',
    defaults    : {
        anchor     : '-10',
        labelWidth : 65
    },
    items       : [
        {
            fieldLabel : 'First name',
            name       : 'firstName'
        },
        {
            fieldLabel : 'Last name',
            name       : 'lastName'
        }
    ],
    buttons : [
        {
            text    : 'Submit',
            handler : function() {
                var formPanel = this.up('#formPanel'),
                    vals      = formPanel.getValues(),
                    greeting  = tpl.apply(vals);

                Ext.Msg.alert('Hello!', greeting);
            }
        }
    ]
});


Ext.onReady(function() {

    Ext.create('Ext.window.Window', {
        height   : 125,
        width    : 200,
        closable : false,
        title    : 'Input needed.',
        border   : false,
        layout   : 'fit',
        items    : formPanel
    }).show();

});

快打开http://127.0.0.1/hello_world1.html 看看吧。