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