一、去官网下载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="../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.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

ExtJS入门实例的更多相关文章

  1. 无废话ExtJs 入门教程二十一[继承：Extend]

    无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...

  2. 无废话ExtJs 入门教程十九[API的使用]

    无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...

  3. 无废话ExtJs 入门教程十六[页面布局：Layout]

    无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...

  4. 无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]

    无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...

  5. 无废话ExtJs 入门教程十三[上传图片：File]

    无废话ExtJs 入门教程十三[上传图片:File] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...

  6. 无废话ExtJs 入门教程二十[数据交互：AJAX]

    无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...

  7. 无废话ExtJs 入门教程十七[列表：GridPanel]

    无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...

  8. React 入门实例教程(转载)

    本人转载自: React 入门实例教程

  9. struts入门实例

    入门实例 1  .下载struts-2.3.16.3-all  .不摆了.看哈就会下载了. 2  . 解压  后 找到 apps 文件夹. 3.    打开后将 struts2-blank.war   ...

随机推荐

  1. logistic公式形式的由来，从广义线性回归说起

    普通线性回归的形式为:(之所以这么写是因为的线性才是线性的所指) 线性回归模型有一下以下几个特征: 1. 2.x,y 通常取值连续 3.y的分布为正态分布或接近正态. 广义线性模型进行了如下推广: 1 ...

  2. urllib.urlretrieve的用法

    urllib.urlretrieve(url, local, cbk) urllib.urlretrieve(p,'photo/%s.jpg'%p.split('/')[-4]) url要下载的网站 ...

  3. web之css伪类

    利用伪类清楚浮动: 代码: <!DOCTYPE html> <htmllang="en"> <head> <metacharset=&qu ...

  4. perl中常见的语法规则和函数

    数值比较操作符         字符串 相等          ==                        eq 不等          !=                         ...

  5. 修改订单的收货时间（MySQL）脚本

    需求 下单时间为21:00-23:59,并且收货时间为第二天的订单,将这些订单的收货时间改为第三天: #!/bin/bash ###time:2016-04-26 ###This script is ...

  6. [OC笔记] Category分类之见解

    用过别的语言做过开发的同学都知道,如果你想扩充一个类,就应该去继承这个类.但是OC里面有更好的方法,那就是分类. 那什么是分类呢?就是在不改变原先类,我们可以在其中添加咱们自定义的方法,这样和同事合作 ...

  7. ajaxSubmit

    $('button').on('click', function() {    $('form').on('submit', function() {        var title = $('in ...

  8. [题解]vijos 运输计划

    Description 公元 2044 年,人类进入了宇宙纪元.L 国有 n 个星球,还有 n−1 条双向航道,每条航道建立在两个星球之间,这 n−1 条航道连通了 L 国的所有星球.小 P 掌管一家 ...

  9. Python.Module.site

    site " This module is automatically imported during initialization. The automatic import can be ...

  10. JavaScript数组删除重复元素（去重）的方法

    1. var arr=str.split(""); ;arr.length->i;i++){ ;j<arr.length;j++){ if(arr[j]==arr[i] ...