ExtJS入门实例

一、去官网下载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

+ View Code

　　

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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