首页 > 代码库 > EXTJS入门实例

EXTJS入门实例

2024-07-13 05:58:54   219人阅读

最近了解了下EXTJS，想记录下来自己的成果，希望对刚入门EXT的同学有点帮助，首先来做个简单的实例。

一、去官网下载EXTJS包extjs5,这里采用的是5.0版本，下面就正式开启吧！

 

二、解压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.html

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

　　

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

 


联系
我们