ExtJS教程詳解

一、介紹

ExtJS是公認的最為強大的JavaScript庫之一。它擴展了原生JavaScript的功能，通過基礎組件和高級UI來簡化創建具有專業外觀的Web應用程序的過程。它為開發人員提供了豐富的開發體驗，通過使用命令式編碼，可以輕鬆地處理數據綁定、模板管理、DOM操作、消息傳遞等等。

ExtJS提供了許多讓我們更快捷、輕鬆地構建Web應用程序所需的工具，如數據網格、表單、面板、卡片布局、工具欄和菜單等等。它還包含強大的事件處理器和許多常用的UI部件，例如對話框和消息框。通過使用ExtJS，可以為應用程序創建一個協調的、具有專業外觀的用戶界面。

二、基礎知識

在開始使用ExtJS之前，您應該掌握以下基礎知識：

1、HTML：HTML是用於創建Web頁面的標記語言。它是Web應用程序的構建基礎。

2、CSS：CSS用於控制文檔的呈現方式，例如字體、顏色和大小等。它允許您控制Web應用程序的外觀和布局。

3、JavaScript：JavaScript是一種面向對象的語言，我們使用它來添加交互性和動態效果，例如數據綁定、事件管理和DOM操作等。

如果您不了解這些基本概念，那麼閱讀其他教程可以幫助您入門。

三、組件

ExtJS由許多不同類型的組件組成，這些組件可以方便地用於Web應用程序的構建。以下是對其中一些組件的簡要概述：

1、GridPanel

GridPanel是ExtJS最強大和最常用的組件之一。它可以在網格中顯示和編輯來自數據源的記錄。

    Ext.onReady(function(){
        var gridPanel = new Ext.grid.GridPanel({
            store: new Ext.data.JsonStore({
                fields: ['name', 'age', 'telephone'],
                data: [
                    {name: 'Bob', age: 28, telephone: '555-111-1224'},
                    {name: 'Sara', age: 32, telephone: '555-222-1234'},
                    {name: 'Jim', age: 45, telephone: '555-222-1244'},
                    {name: 'Rachel', age: 30, telephone: '555-111-1234'}
                ]
            }),
            columns: [
                {header: 'Name', width: 80, sortable: true, dataIndex: 'name'},
                {header: 'Age', width: 50, sortable: true, dataIndex: 'age'},
                {header: 'Telephone', width: 120, sortable: true, dataIndex: 'telephone'}
            ]
        });
        gridPanel.render('grid-example');
    });

2、Panel

Panel是一個通用的容器，可以包含其他任意ExtJS組件。

    Ext.onReady(function(){
        var myPanel = new Ext.Panel({
            title: 'My Panel',
            width: 200,
            height: 150,
            html: 'This is my panel!'
        });
        myPanel.render(document.body);
    });

3、TreePanel

TreePanel是一個允許您創建可展開和可摺疊的層次結構的組件。它是顯示各種數據類型，例如文件夾等的理想選擇。

    Ext.onReady(function(){
        var treePanel = new Ext.tree.TreePanel({
            root: new Ext.tree.AsyncTreeNode({
                expanded: true,
                children: [
                    {text: 'Menu Option 1', leaf: true},
                    {text: 'Menu Option 2', leaf: true}
                ]
            }),
            rootVisible: false,
            autoScroll: true,
            title: 'My TreePanel'
        });
        treePanel.render(document.body);
    });

四、表單

表單是處理用戶輸入的強有力的Web工具。好的表單需要多個表單控制項（例如文本框、下拉框、複選框和單選框）以及參數驗證等元素。以下是如何在ExtJS中創建表單的示例：

    Ext.onReady(function(){
        var myForm = new Ext.form.FormPanel({
            labelWidth: 100,
            url:'save-form.php',
            layout:'form',
            frame:true,
            title: 'My Form Panel',
            items: [{
                xtype:'textfield',
                fieldLabel: 'Name',
                name: 'name',
                allowBlank:false
            },{
                xtype:'textfield',
                fieldLabel: 'Email',
                name: 'email',
                allowBlank:false,
                vtype:'email'
            },{
                xtype:'textarea',
                fieldLabel: 'Message',
                name: 'message',
                allowBlank:false
            }]
        });
        myForm.render(document.body);
    });

五、布局管理器

布局管理器是一種使您可以控制面板、網格和表單等組件的位置和大小的工具。以下是在ExtJS中使用布局組件的基本示例：

1、Border Layout

BorderLayout是一種布局，您可以將面板放在頁面的頂部、底部、左側或右側，還可以在屏幕的中央放置面板。

    Ext.onReady(function() {
        var myPanel = new Ext.Panel({
            title: 'Border Layout',
            border: true,
            layout: 'border',
            renderTo: Ext.getBody(),
            defaults: {
                collapsible: true,
                split: true
            },
            items: [{
                title: 'North Panel',
                region: 'north',
                height: 100
            },{
                title: 'West Panel',
                region: 'west',
                width: 150
            },{
                title: 'East Panel',
                region: 'east',
                width: 150
            },{
                title: 'South Panel',
                region: 'south',
                height: 100
            },{
                title: 'Center Panel',
                region: 'center'
            }]
        });
    });

六、結論

從上述代碼示例中可以看出，ExtJS是一個強大的工具庫，為Web應用程序的構建提供了許多組件和工具。它可以讓開發人員輕鬆地創建具有專業外觀的用戶界面，以及實現更多的複雜功能。相信通過本篇文章，您對ExtJS的基礎知識、組件、表單、布局管理器有了更深入的了解。