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框架。

ExtJS中文文档详细阐述