logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

ExtJS入门实例

 dengshisong 2017-02-13

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

 index.html
<!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>
二、解压extjs包，找到

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

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

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

 

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

 

index.js

复制代码
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();
    }
});
复制代码

 

四、创建视图、控制器

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

 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

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： dengshisong > 《Exjts》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多