Extjs5.1学习模仿登录界面

jhui123456

于 2018-10-08 12:02:14 发布

阅读量337

点赞数

文章标签： extjs

本文链接：https://blog.csdn.net/jhui123456/article/details/82966168

版权

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文件代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

     <!-- GC <link rel="stylesheet" type="text/css" href="../../../ext-5.1.0/resources/css/ext-all.css" />-->
    
	  <link rel="stylesheet" type="text/css" href="../../../ext-5.1.0/build/packages/ext-theme-classic/build/resources/ext-theme-classic-all-debug.css">
      
        <script type="text/javascript" src="../../../ext-5.1.0/build/packages/ext-theme-classic/build/ext-theme-classic-debug.js"></script>
	<script type="text/javascript" src="../../../ext-5.1.0/build/ext-all-debug.js"></script>
    <script type='text/javascript' src="hello_world.js"></script>

</head>
    <body></body>
</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 看看吧。
在这里插入图片描述

jhui123456

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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使用了经典版的主题。下面是hel...
复制链接

扫一扫