ExtJS中文文檔詳細闡述

ExtJS是一個流行的JavaScript框架，被廣泛用於創建跨平台的Web應用程序。本文將從多個方面對ExtJS中文文檔進行詳細闡述，包括組件、布局、事件、請求、數據模型和表單驗證等方面。

一、組件

組件是構成ExtJS應用程序的基本元素，用於呈現內容和處理用戶交互。組件可以是單個元素，也可以是由多個元素組成的容器。

在ExtJS中，使用Ext.create()函數創建組件實例。例如，下面是一個創建按鈕組件實例的示例代碼：

 Ext.create('Ext.button.Button', {
     text    : 'Click me',
     renderTo: Ext.getBody(),
     handler : function() {
         alert('You clicked the button!');
     }
 });

上面的代碼創建了一個名為「Click me」的按鈕，並將其渲染到頁面的標籤中。當用戶單擊按鈕時，會彈出一個警告框。

在ExtJS中，還有許多其他的組件可供使用，例如文本欄位、列表框、面板、網格和菜單等。每個組件都有自己的配置選項和事件，可以根據需要進行設置和處理。

二、布局

布局是指在應用程序中排列和組織組件的方式。在ExtJS中，通過將組件包含在容器組件中來實現布局。

常用的容器組件包括面板、窗口、標籤面板和分隔符面板等。每個容器組件都有自己的布局選項，可以用於設置組件的尺寸、位置和對齊方式。

例如，下面的代碼演示了如何將兩個按鈕組件放置在面板組件中，並使用hbox布局進行水平排列：

var panel = Ext.create('Ext.panel.Panel', {
    title: 'Button Panel',
    width: 300,
    height: 200,
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [{
        xtype: 'button',
        text: 'Button 1',
        flex: 1
    }, {
        xtype: 'button',
        text: 'Button 2',
        flex: 1
    }]
});

panel.render(Ext.getBody());

上面的代碼創建了一個名為「Button Panel」的面板，寬度為300，高度為200，並在面板中放置了兩個按鈕組件。這兩個按鈕組件使用了flex選項，將面板水平分成兩個等寬的部分。

三、事件

事件是指應用程序中發生的動作或狀態更改，例如單擊按鈕、選擇列表項或拖動元素等。在ExtJS中，每個組件都有自己的事件，可以用於響應用戶的操作。

例如，下面的代碼演示了如何在單擊按鈕時觸發事件：

var button = Ext.create('Ext.button.Button', {
    text: 'Click me',
    renderTo: Ext.getBody(),
    handler: function() {
        alert('You clicked the button!');
    }
});

button.on('click', function() {
    console.log('Button clicked.');
});

上面的代碼創建了一個名為「Click me」的按鈕，並在單擊按鈕時觸發一個警告框和一個控制台消息。

除了每個組件的特定事件之外，ExtJS還提供了全局事件，例如beforeload和load事件，可以用於在數據載入之前和之後執行操作。

四、請求

在ExtJS中，可以使用Ext.Ajax類發出HTTP請求，例如獲取數據、提交表單或執行搜索。可以使用GET和POST方法，以及自定義HTTP請求頭和參數。

例如，下面的代碼演示了如何使用GET方法從伺服器獲取JSON數據：

Ext.Ajax.request({
    url: 'data.json',
    method: 'GET',
    success: function(response) {
        var data = Ext.JSON.decode(response.responseText);
        console.log(data);
    },
    failure: function(response) {
        console.log('Request failed.');
    }
});

上面的代碼從名為「data.json」的文件中獲取數據，並在成功時將其解碼成JavaScript對象，並將其輸出到控制台。

五、數據模型

在ExtJS中，可以使用數據模型來定義數據對象，例如用戶、任務或評論等。數據模型定義了對象的欄位和類型，以及與其他對象之間的關係。

例如，下面的代碼演示了如何定義一個任務數據模型：

Ext.define('Task', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        type: 'int'
    }, {
        name: 'title',
        type: 'string'
    }, {
        name: 'description',
        type: 'string'
    }, {
        name: 'dueDate',
        type: 'date',
        dateFormat: 'Y-m-d'
    }],
    hasMany: {
        model: 'Comment',
        name: 'comments'
    }
});

上面的代碼定義了一個名為「Task」的數據模型，包含四個欄位：id、title、description和dueDate。其中，dueDate欄位的類型為日期，並且使用「Y-m-d」格式進行序列化和反序列化。此外，還定義了一個關係，表示每個任務可以有多個評論。

六、表單驗證

在ExtJS中，可以使用表單驗證來確保用戶輸入的數據符合要求，例如必須填寫、必須是有效的電子郵件地址或必須符合密碼規則等。

例如，下面的代碼演示了如何創建一個名為「LoginForm」的表單，並使用驗證函數來確保用戶名和密碼不為空：

Ext.create('Ext.form.Panel', {
    title: 'Login',
    width: 300,
    height: 200,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        name: 'username',
        fieldLabel: 'Username',
        allowBlank: false
    }, {
        xtype: 'textfield',
        name: 'password',
        inputType: 'password',
        fieldLabel: 'Password',
        allowBlank: false
    }],
    buttons: [{
        text: 'Login',
        formBind: true,
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    url: 'login.php',
                    success: function(form, action) {
                        console.log('Success');
                    },
                    failure: function(form, action) {
                        console.log('Failure');
                    }
                });
            }
        }
    }]
});

上面的代碼創建了一個名為「LoginForm」的表單，包含兩個文本欄位：username和password。在按鈕單擊時，表單被提交到「login.php」URL，並根據結果進行處理。

結語

本文從諸多方面對ExtJS中文文檔進行了詳細的闡述，包括組件、布局、事件、請求、數據模型和表單驗證等方面。希望本文能夠幫助讀者更好地理解和使用ExtJS框架。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/308571.html