ExtJS入门实例

时间：2023-02-13 11:54:15

一、去官网下载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 入门教程二十一&lbrack;继承：Extend&rsqb;

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

  2. 无废话ExtJs 入门教程十九&lbrack;API的使用&rsqb;

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

  3. 无废话ExtJs 入门教程十六&lbrack;页面布局：Layout&rsqb;

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

  4. 无废话ExtJs 入门教程十五&lbrack;员工信息表Demo：AddUser&rsqb;

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

  5. 无废话ExtJs 入门教程十三&lbrack;上传图片：File&rsqb;

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

  6. 无废话ExtJs 入门教程二十&lbrack;数据交互：AJAX&rsqb;

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

  7. 无废话ExtJs 入门教程十七&lbrack;列表：GridPanel&rsqb;

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

  8. React 入门实例教程&lpar;转载&rpar;

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

  9. struts入门实例

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

随机推荐

  1. IQ推理：P先生和Q先生

    P先生.Q先生具有足够的推理能力.这天,他们正在接受面试. 他们知道桌子的抽屉里有16张扑克牌:红桃 A Q 4黑桃 J 8 4 2 7 3草花 K Q 5 4 6方块 A 5约瀚教授从这16张牌中挑 ...

  2. gcc命令行详解

    介绍] ----------------------------------------- 常见用法: GCC 选项 GCC 有超过100个的编译选项可用. 这些选项中的许多你可能永远都不会用到, 但 ...

  3. Mongodb与关系型数据库

    MongoDB没有固定的关系约束 没有事务, 安全性不高 不一定保证数据的一致性. ACID不符合 NoSQL 放弃了传统关系型数据库严格的事务一致性和范式约束,采用弱一致性模型. http://os ...

  4. Jenkins学习之——&lpar;1&rpar;Jenkins的安装与配置

    1.最近公司要求做自动化部署,于是自学了jenkins.这个参考书很少,网上的文章也讲得很模糊,于是打算把自己学习东西记下来,希望对大家有所帮助. 一.jenkins的安装 到jenkins官网(ht ...

  5. &lbrack;Android学习笔记&rsqb;jackson库的使用

    Jackson库一般用于序列化和反序列化操作,通常会涉及到的操作是: 1. Java Object -> Json String 2. Java Object -> Xml String ...

  6. 类string解析

    原创作品,转载请注明来源:http://www.cnblogs.com/shrimp-can/p/5645248.html 在涉及字符串的时候,我们可以定义字符数组或指针,其实还有一个类,专门是为字符 ...

  7. RabbitMQ --- Publish&sol;Subscribe（发布&sol;订阅）

    目录 RabbitMQ --- Hello Mr.Tua RabbitMQ --- Work Queues(工作队列) 前言 在第二篇文章中介绍了 Work Queues(工作队列),它适用于把一个消 ...

  8. redmine3&period;3基于bitnami集成快速安装

    形而上学,此景此情,古今一般同!好的东西,逢人喜!redmine在当下还是不错的. 源码安装redmine,相对复杂基于ruby运行的!化繁为简实!追究极致万物! 00.环境及软件说明 bitnami ...

  9. Javaweb查询客户&amp&semi;分页部分代码

    pageBean工具类代码(分页工具) package com.home.domain; import java.util.List; /** * 分页的JavaBean * @author Admi ...

  10. unix网络编程——TCP套接字编程

    TCP客户端和服务端所需的基本套接字.服务器先启动,之后的某个时刻客户端启动并试图连接到服务器.之后客户端向服务器发送请求,服务器处理请求,并给客户端一个响应.该过程一直持续下去,直到客户端关闭,给服 ...

相关文章