ExtJS是一个开源的JavaScript框架，它为开发人员提供了强大的工具来构建出色的Web应用程序。使用ExtJS，您可以轻松地创建具有高级UI功能和丰富数据可视化的复杂应用程序。为了帮助初学者入门，本文提供了完整的ExtJS教程，您可以从零开始学习和实践。

第一步：安装ExtJS

要开始学习ExtJS，您需要先安装它。从ExtJS官方网站（https://www.sencha.com/products/extjs）下载最新版本的ExtJS。解压缩文件后，可以在您的项目中使用它。

第二步：创建Web页面

在您的首选开发环境中创建HTML页面。在页面中确定实际使用的版本。通常，我们使用以下版本：

第三步：首次使用ExtJS

在页面中，我们现在使用最小的ExtJS代码来显示一个消息框：

Ext.onReady(function() {

Ext.Msg.alert('Status', 'Changes saved successfully.');

});

在上面的代码中，Ext.onReady（）函数用于确保视图和面板已经加载和渲染。Ext.Msg.alert（）函数用于显示消息框，用于确定更改是否成功保存。

第四步：首次使用ExtJS面板

现在，我们来创建一个面板，里面包含按钮和文本框。在面板中添加组件的常规步骤是：创建组件、设置其属性，并添加到面板中。

Ext.onReady(function() {

Ext.create('Ext.panel.Panel', {

title: 'Panel with button and textfield',

width: 300,

height: 200,

renderTo: Ext.getBody(),

items: [

{ xtype: 'textfield', fieldLabel: 'Name' },

{ xtype: 'button', text: 'Click Me' }

]

});

});

在上面的代码中，我们使用Ext.create（）函数创建了一个名为“Panel with button and textfield”的面板。我们设置了它的宽度和高度，并将其渲染到HTML页面的body元素上。此外，面板包含一个文本框和一个按钮，使用“items”属性添加到面板中。

第五步：ExtJS数据模型和数据存储

当您使用一个面板或更多的导航页面时，您需要有一个源来存储或管理数据。对于这个目的，您可以使用ExtJS Store和Model类，它们旨在处理数据的持久性、存储和维护。

Ext.define('User', {

extend: 'Ext.data.Model',

fields: [

{ name: 'id', type: 'int' },

{ name: 'name', type: 'string' },

{ name: 'email', type: 'string' }

]

});

var userStore = Ext.create('Ext.data.Store', {

model: 'User',

proxy: {

type: 'ajax',

url: '/users',

reader: {

type: 'json',

root: 'data'

}

}

});

在上面的代码中，我们首先定义了一个名为“User”的模型类。模型类包含三个字段，分别是“id”、“name”和“email”。接下来，我们创建了一个名为“userStore”的数据存储，使用“User”模型和一个远程代理（ajax请求），返回JSON数据格式的URL。

第六步：使用ExtJS Grid来显示数据

我们可以使用一个名为Ext.grid.Panel的面板来显示Store中存储的数据。 它提供所有必需的功能，例如分页、排序、筛选等。

Ext.onReady(function() {

var grid = Ext.create('Ext.grid.Panel', {

store: userStore,

columns: [

{ text: 'ID', dataIndex: 'id' },

{ text: 'Name', dataIndex: 'name' },

{ text: 'Email', dataIndex: 'email' }

],

height: 400,

width: 500,

title: 'User List',

renderTo: Ext.getBody()

});

userStore.load();

});

在上面的代码中，我们创建了一个名为“grid”的Grid面板。它包含三个列，分别是“ID”、“Name”和“Email”，从Store中获取数据。我们将高度设为400，宽度设为500，并将其标题设置为“User List”。最后，我们使用load函数加载数据。

第七步：ExtJS表单和窗口

当用户想要更改数据时，我们需要使用一个表单。表单通常包含用于数据输入和保存的各种字段。 使用Ext.form.Panel类，我们可以轻松地创建包含表单元素的面板。一个表单通常有文本框、下拉框、复选框等。

Ext.define('User', {

extend: 'Ext.data.Model',

fields: [

{ name: 'id', type: 'int' },

{ name: 'name', type: 'string' },

{ name: 'email', type: 'string' }

]

});

var userForm = Ext.create('Ext.form.Panel', {

title: 'Edit User',

bodyPadding: 5,

width: 300,

items: [

{ xtype: 'textfield', fieldLabel: 'Name', name: 'name' },

{ xtype: 'textfield', fieldLabel: 'Email', name: 'email' }

]

});

var userWindow = Ext.create('Ext.window.Window', {

title: 'Add User',

width: 300,

items: [userForm],

buttons: [

{ text: 'Save', handler: function() { /* save form data here */ } },

{ text: 'Cancel', handler: function() { userWindow.hide(); } }

]

});

在上面的代码中，我们定义了一个名为“userForm”的表单。它包含两个文本框，分别是“Name”和“Email”，并被添加到一个名为“userWindow”的窗口中。窗口宽度设置为300，并分别包含两个按钮：“Save”和“Cancel”。

第八步：使用ExtJS事件处理程序

事件处理程序是常常用在ExtJS当中的JavaScript函数。 事件处理程序通常被添加到用户界面元素并在响应事件时执行。 例如，当按钮被点击时，它将触发“click”事件，该事件被处理程序捕获并执行某些操作。

Ext.onReady(function() {

var button = Ext.create('Ext.button.Button', {

text: 'Click Me',

renderTo: Ext.getBody()

});

button.on('click', function() {

Ext.Msg.alert('Button Clicked', 'You clicked the button!');

});

});

在上面的代码中，我们定义了一个名为“button”的ExtJS按钮，并在被单击时触发click事件。我们使用on（）函数添加了一个名为“function”的事件处理程序，在单击按钮时打开一个消息框。

综上所述，这是一个从零开始学习ExtJS的完整教程。通过这个教程，您将了解如何使用ExtJS构建有效的Web应用程序，并掌握多种常用组件、Store、Grid、表单和事件处理程序。现在就开始你的ExtJS之旅吧！