一、去官网下载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. asp.net前台代码中引入namespace的方法

    <%@ import NameSpace="System.Data.OleDb" %>

  2. Java处理Excel整理篇

    常用Excel,每次写的时候都得现查,索性做一个整理. Java里用的时候一般用jxl这个包,相对好用. 读: File file = new File(excelFile);Workbook boo ...

  3. shell 统计某个文件的行数命令

    语法:wc [选项] 文件- 说明:该命令统计给定文件中的字节数.字数.行数.如果没有给出文件名,则从标准输入读取.wc同时也给出所有指定文件的总统计数.字是由空格字符区分开的最大字符串. 该命令各选 ...

  4. 力软信息化系统快速开发框架 web端+winform端

    力软信息化系统快速开发框架是一套集权限管理+快速开发+动态接口+通用组件+动态UI于一体的全新.net信息化快速开发框架.力软信息化系统快速开发框架的使用,大大地缩短了开发周期,提高了软件质量,同时也 ...

  5. 循序渐进Python3（十一） --1-- web之css

    css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观. 基本上所有的html页面都或多或少的使用css.   ...

  6. 循序渐进Python3（十）-- 0 -- RabbitMQ

    RabbitMQ     RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然在同步消息 ...

  7. Android笔记之——事件的发生

    Java:package com.example.helloworld;import android.content.Intent;import android.support.v7.app.AppC ...

  8. 查看已安装的CentOS版本信息：

    如何查看已安装的CentOS版本信息: 1)[root@localhost ~]# cat /proc/version Linux version 2.6.18-194.el5 (mockbuild@ ...

  9. thinkphp 添加 修改删除

    在 MainController.class.php 添加 public function zhuCe() { //时间两个逻辑 // 1 显示页面 2向数据库添加 if(empty($_POST)) ...

  10. 查询AD账号的SID

    在非域控的计算机上可以查询所用AD用户的SID,不过现成的工具不能直接实现此目的,我们需要在这些计算机上安装RSAT(远程服务器管理工具),然后使用dsquery和dsget命令,来快速查询AD用户的 ...