一、去官网下载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. PHP中使用cURL实现Get和Post请求的方法

    1.cURL介绍  cURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP.FTP.TELNET等.最爽的是,PHP也支持 cURL 库.本文将介绍 cURL 的一些高级特 ...

  2. Hadoop 调研笔记

    由于从各光伏电站采集的数据量较大,必须解决海量数据的查询.分析的问题.目前主要考虑两种方式:1.  Hadoop大数据技术:2.  Oracle(数据仓库)+BI:    本文仅介绍hadoop的技术 ...

  3. 搭建DAO层和Service层代码

    第一部分建立实体和映射文件 1 通过数据库生成的实体,此步骤跳过,关于如何查看生成反向工程实体类查看SSH框架搭建教程-反向工程章节 Tmenu和AbstractorTmenu是按照数据库表反向工程形 ...

  4. 平板上的js和电脑上js的不同之处

    一.事件 1.平板上没有:onmousedown,onmouseup,onmousemove等事件,由ontouchstart,ontouchmove,ontounchend替代 2.位置问题:平板上 ...

  5. jQuery图片旋转展示收缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. MongoDB安装启动服务

    这里主要是针对解决出现的问题. 1.MongoDB 下载地址http://www.mongodb.org/downloads 下载之后可以自定义安装路径,我安装在了D盘下. 然后在环境变量中添加: M ...

  7. python数据统计，总数，平均值等

    一般我们进行数据统计的时候要进行数据摸查,可能是摸查整体的分布情况啊.平均值,标准差,总数,各分段的人数啊.这时候用excel或者数据库统计都不方便. 我要统计的一个文件,太大了,还得分成15个文件, ...

  8. DOM元素querySelectorAll可能让你意外的特性表现

    一.时间紧急,废话少说 本文所在的页面藏匿了下面这些代码: <img id="outside"> <div id="my-id"> &l ...

  9. centos分区

    /boot :用来存放与 Linux 系统启动有关的程序,比如启动引导装载程序等,建议大小为 100MB . /usr :用来存放 Linux 系统中的应用程序,其相关数据较多,建议大于 3GB 以上 ...

  10. 关于SharpZipLib压缩分散的文件及整理文件夹的方法

    今天为了解决压缩分散的文件时,发现想通过压缩对象直接进行文件夹整理很麻烦,因为SharpZipLib没有提供压缩进某个指定文件夹的功能,在反复分析了SharpZipLib提供的各个接口方法后,终于找到 ...