ExtJS入門實例

時間 2019-12-06

標籤 extjs 入門實例简体版

原文原文鏈接

1、去官網下載EXTJS包extjs5,這裏採用的是5.0版本！javascript

2、解壓extjs包，找到css

　　ext-all.js基礎包（\ext-5.0.0\build）；html

　　ext-all-debug.js基礎包，開發的時候使用，報錯會詳細些（\ext-5.0.0\build）；java

　　選一個合適的主題，這裏我使用crisp，找到ext-theme-crisp-all.css和images文件（\packages\ext-theme-crisp\build\resources）app

3、新建index.html頁面並引用ext-all-debug.js、ext-theme-crisp-all.css，新建index.js應用啓動設置文件、新建app文件夾放controller/view/model/storeui

index.htmlthis

<!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.jsspa

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();
    }
});

4、建立視圖、控制器debug

在view文件夾下添加視圖MyViewport.js,下面我在視圖裏面加了個簡單的表單code

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

1. EXTJS框架-入門實例
2. ExtJS入門
3. ExtJs入門學習
4. ExtJs 之GridPanel實例
5. 【EXTJS入門】extjs 和 sencha cmd的安裝
6. ExtJS+Handler入門顯示
7. ExtJS快速入門指南
8. ExtJS入門之事件(fireEvent)
9. Akka入門實例
10. springmvc入門實例
更多相關文章...
• Memcached入門教程 - NoSQL教程
• XML DOM 實例 - XML DOM 教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。