一、组件
组件是构成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框架。
