一、介绍

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的基础知识、组件、表单、布局管理器有了更深入的了解。

ExtJS教程详解