ExtJS入门实例

时间 2019-12-06 标签 extjs 入门实例

1、去官网下载EXTJS包extjs5,这里采用的是5.0版本！javascript

2、解压extjs包，找到css

　　ext-all.js基础包（\ext-5.0.0\build）；html

　　ext-all-debug.js基础包，开发的时候使用，报错会详细些（\ext-5.0.0\build）；java

　　选一个合适的主题，这里我使用crisp，找到ext-theme-crisp-all.css和images文件（\packages\ext-theme-crisp\build\resources）app

3、新建index.html页面并引用ext-all-debug.js、ext-theme-crisp-all.css，新建index.js应用启动设置文件、新建app文件夹放controller/view/model/storeui

index.htmlthis

<!DOCTYPE HTML>
<html>
<head>
    <title>demo</title>
    <link href="../Ext/ext-theme-crisp-all.css" rel="stylesheet" type="text/css" />
    <script src="../Ext/ext-all-debug.js" type="text/javascript"></script>
    <script src="index.js?v=20140721017" type="text/javascript"></script>
</head>
<body>
</body>
</html>

index.jsspa

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: 'Demo1',
    appFolder: 'app',

    models: [

    ],
    stores: [

    ],
    controllers: [
        'MyController'
    ],
    views: [
        'MyViewport'
    ],
    launch: function () {
        var app = new Demo1.view.MyViewport();
    }
});

4、建立视图、控制器debug

在view文件夹下添加视图MyViewport.js,下面我在视图里面加了个简单的表单code

MyViewport.js

Ext.define('Demo1.view.MyViewport', {
    extend: 'Ext.container.Viewport',
    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'form',
                    title: '用户修改密码',
                    width: 300,
                    bodyPadding: 10,
                    defaultType: 'textfield',
                    border: false,
                    items: [
                        {
                            allowBlank: false,
                            id: 'txtPwdOld',
                            fieldLabel: '原密码',
                            name: 'pwdOld',
                            labelWidth: 100,
                            emptyText: '原密码',
                            inputType: 'password'
                        },
                        {
                            allowBlank: false,
                            id: 'txtPwdNew',
                            fieldLabel: '新密码',
                            name: 'pwdNew',
                            labelWidth: 100,
                            emptyText: '新密码',
                            inputType: 'password'
                        },
                        {
                            allowBlank: false,
                            id: 'txtPwdNew2',
                            fieldLabel: '再次输入新密码',
                            name: 'pwdNew2',
                            labelWidth: 100,
                            emptyText: '再次输入新密码',
                            inputType: 'password'
                        }
                    ],
                    buttons: [
                        {
                            text: '保存',
                            id:'btnSavePwd'
                        }
                    ]
                }
            ]
        });

        this.callParent(arguments);
    }

});

在controller文件夹下添加控制器MyController.js,程序代码均可以写在控制器里面，用得最多的就是监听控件事件，下面简单举例，对表单中的保存按钮监听点击事件

MaController.js

Ext.define('Demo1.controller.MyController', {
    extend: 'Ext.app.Controller',

    init: function (application) {
        this.control({
            '[id=btnSavePwd]': {
                click: this.onOK
            }
        });
    },

    //保存
    onOK: function (obj) {
        var form = obj.up('form').getForm();
        if (form.isValid()) {
            Ext.Msg.alert('信息提示', '已保存');
        }
    }
});

到这里，程序已经能够运行了,源码：http://pan.baidu.com/s/1i3rBS8X