码迷,mamicode.com
首页 > Web开发 > 详细

EXTJS入门实例

时间:2014-07-22 00:23:35      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   使用   

最近了解了下EXTJS,想记录下来自己的成果,希望对刚入门EXT的同学有点帮助,首先来做个简单的实例。

一、去官网下载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入门实例,布布扣,bubuko.com

EXTJS入门实例

标签:style   blog   http   java   color   使用   

原文地址:http://www.cnblogs.com/taylorchen/p/3813993.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!