ExtJS是一个MVC架构模式的前端Javascript框架，具有强大的UI组件库和丰富的插件架构。它不仅支持常规的面向对象编程方式，还提供了许多高级特性如数据绑定、模板引擎等，使开发者能够构建庞大而复杂的Web应用程序。

如何从入门到精通ExtJS呢？本文将详细解释ExtJS教程，以帮助初学者理解这个强大的前端框架。

1.了解ExtJS

在开始深入了解ExtJS之前，我们需要先了解一些基础知识。首先，ExtJS是由Sencha公司开发的一个前端框架，它提供了丰富的UI组件库和许多高级特性。其次，ExtJS采用MVC（Model-View-Controller）架构模式，这使得代码更易于组织和维护。最后，ExtJS支持数据绑定和模板引擎等高级特性，这些特性使开发者能够构建动态和交互性的Web应用程序。

2.安装ExtJS

在开始使用ExtJS之前，我们需要先安装它。可以从Sencha公司的官方网站下载ExtJS，也可以使用npm安装。

安装完成后，可以打开命令行工具检查是否安装成功。运行以下命令：

extjs -version

如果一切顺利，将会输出ExtJS的版本信息。

3.了解Sencha Cmd

Sencha Cmd是一个由Sencha公司提供的命令行工具，它可以让你更容易掌握ExtJS、构建应用程序和生成文档。

使用Sencha Cmd以创建一个新的ExtJS应用程序，可以使用以下命令：

sencha generate app MyApp ~/myapp

这将创建一个名为“MyApp”的新应用程序，在“~/myapp”目录下。该目录将包含一些默认文件和文件夹，如“app”和“resources”。

4.创建一个简单的ExtJS应用程序

在开始构建具体的应用程序之前，我们将创建一个简单的ExtJS应用程序，以了解该框架的基本工作方式。

在继续之前，请确保已经设置了正确的环境变量，否则在创建和生成应用程序时可能会出现问题。

首先，创建一个名为“myapp”的新应用程序。在命令行中输入以下命令：

sencha generate app myapp ./myapp

该命令将在当前目录下创建一个名为“myapp”的新应用程序。

接下来，修改“app.js”文件。这是应用程序的入口文件。它包含所有需要创建的视图、模型、控制器和存储器。

在“app.js”文件中，找到“launch”函数。这是应用程序启动时调用的函数。在这个函数内，我们需要创建一个新的ExtJS panel，然后将其添加到页面中。

以下代码展示了如何创建一个包含文本“Hello World”的新panel：

```

Ext.application({

name: 'myapp',

launch: function() {

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

width: 200,

height: 200,

title: 'Hello World',

renderTo: Ext.getBody()

});

}

});

```

此代码创建一个新的panel，设置了它的宽度、高度和标题。然后，它使用“renderTo”选项将panel添加到页面中。

最后，运行以下命令：

sencha app watch

此命令将生成应用程序，并在浏览器中启动一个Web服务器。打开浏览器，导航到http://localhost:1841，并查看输出的panel。此时，您将看到一个新的panel，其中包含文本“Hello World”。

5.了解ExtJS中的MVC模式

如前所述，ExtJS支持MVC模式，这使得代码更易于组织和维护。MVC模式在ExtJS中由以下组件组成：

- “Model”层 - 用于处理数据和业务逻辑

- “View”层 - 用于呈现UI元素，并处理用户交互

- “Controller”层 - 作为Model层和View层之间的桥梁，协调它们之间的通信

在ExtJS中，使用以下代码来创建一个基本的MVC应用程序：

```

Ext.application({

name: 'MyApp',

models: ['User'],

views: ['UserForm'],

controllers: ['UserController'],

launch: function() {

Ext.create('MyApp.view.UserForm', {

renderTo: Ext.getBody()

});

}

});

```

该应用程序由以下组件组成：

- “User”模型 - 用于处理用户数据和业务逻辑

- “UserForm”视图 - 呈现一个表单，用户可用于添加或编辑用户信息

- “UserController”控制器 - 处理控制器和视图之间的通信

在上面的代码中，“User”模型和“UserForm”视图使用以下代码定义：

```

Ext.define('MyApp.model.User', {

extend: 'Ext.data.Model',

fields: ['id', 'name', 'age', 'gender']

});

Ext.define('MyApp.view.UserForm', {

extend: 'Ext.form.Panel',

alias: 'widget.userform',

items: [{

xtype: 'textfield',

name: 'name',

fieldLabel: 'Name'

}, {

xtype: 'numberfield',

name: 'age',

fieldLabel: 'Age'

}, {

xtype: 'textfield',

name: 'gender',

fieldLabel: 'Gender'

}]

});

```

然后，使用以下代码来定义用户控制器：

```

Ext.define('MyApp.controller.UserController', {

extend: 'Ext.app.Controller',

models: ['User'],

views: ['UserForm'],

init: function() {

this.control({

'userform button[action=add]': {

click: this.onAddUser

}

});

},

onAddUser: function(button) {

var form = button.up('form');

var values = form.getValues();

var user = Ext.create('MyApp.model.User', values);

user.save();

}

});

```

最后，在应用程序中使用以下代码来连接模型、视图和控制器：

```

Ext.application({

name: 'MyApp',

models: ['User'],

views: ['UserForm'],

controllers: ['UserController'],

launch: function() {

Ext.create('MyApp.view.UserForm', {

renderTo: Ext.getBody()

});

}

});

```

该代码将创建一个基本的MVC应用程序，用于操作用户数据。

6.使用数据绑定进行数据交互

ExtJS提供了数据绑定功能，它可以让你将视图与模型关联，并允许在视图上直接修改模型的数据。这个功能非常强大，因为它允许你在修改数据时不必编写任何处理代码。

以下代码展示了如何使用数据绑定创建一个基本的数据管理系统：

```

Ext.define('MyApp.model.User', {

extend: 'Ext.data.Model',

fields: ['id', 'name', 'age', 'gender']

});

Ext.define('MyApp.view.UserList', {

extend: 'Ext.grid.Panel',

alias: 'widget.userlist',

title: 'All Users',

store: {

model: 'MyApp.model.User',

autoLoad: true

},

columns: [{

text: 'Name',

dataIndex: 'name'

}, {

text: 'Age',

dataIndex: 'age'

}, {

text: 'Gender',

dataIndex: 'gender'

}],

dockedItems: [{

xtype: 'toolbar',

items: [{

text: 'Add',

iconCls: 'icon-add',

action: 'add'

}, {

text: 'Delete',

iconCls: 'icon-delete',

disabled: true,

action: 'delete'

}]

}],

listeners: {

selectionchange: function(selModel, selections) {

this.down('toolbar button[action=delete]').setDisabled(selections.length === 0);

}

}

});

Ext.define('MyApp.view.UserForm', {

extend: 'Ext.form.Panel',

alias: 'widget.userform',

defaultType: 'textfield',

items: [{

xtype: 'hiddenfield',

name: 'id'

}, {

fieldLabel: 'Name',

name: 'name',

allowBlank: false

}, {

fieldLabel: 'Age',

name: 'age',

xtype: 'numberfield',

allowBlank: false

}, {

fieldLabel: 'Gender',

name: 'gender',

xtype: 'combobox',

store: ['Male', 'Female']

}],

buttons: [{

text: 'Save',

action: 'save'

}, {

text: 'Cancel',

action: 'cancel'

}]

});

Ext.define('MyApp.controller.UserController', {

extend: 'Ext.app.Controller',

models: ['User'],

views: ['UserList', 'UserForm'],

init: function() {

this.control({

'userlist': {

itemdblclick: this.editUser

},

'userlist button[action=add]': {

click: this.addUser

},

'userlist button[action=delete]': {

click: this.deleteUser

},

'userform button[action=save]': {

click: this.saveUser

},

'userform button[action=cancel]': {

click: this.cancelEdit

}

});

},

addUser: function() {

var view = Ext.create('MyApp.view.UserForm');

view.show();

},

deleteUser: function() {

var grid = Ext.getCmp('userlist');

var selection = grid.getSelectionModel().getSelection()[0];

var store = grid.getStore();

store.remove(selection);

store.commitChanges();

},

editUser: function(grid, record) {

var view = Ext.create('MyApp.view.UserForm');

view.loadRecord(record);

view.show();

},

saveUser: function(button) {

var win = button.up('window');

var form = win.down('form');

var values = form.getValues();

var record = form.getRecord();

if (record) {

record.set(values);

record.commit();

} else {

var store = Ext.getCmp('userlist').getStore();

var user = Ext.create('MyApp.model.User', values);

store.add(user);

store.commitChanges();

}

win.close();

},

cancelEdit: function(button) {

button.up('window').close();

}

});

Ext.application({

name: 'MyApp',

models: ['User'],

views: ['UserList'],

controllers: ['UserController'],

launch: function() {

Ext.create('MyApp.view.UserList', {

renderTo: Ext.getBody()

});

}

});

```

这个应用程序由以下组件组成：

- “User”模型 - 用于处理用户数据和业务逻辑

- “UserList”视图 - 基于Ext.grid.Panel的窗格，用于显示用户列表

- “UserForm”视图 - 呈现一个表单，用于添加或编辑用户信息

- “UserController”控制器 - 处理控制器和视图之间的交互以及数据模型

此代码使用数据绑定将模型和视图联系起来。当在视图上进行更改时，模型中的数据也会相应地更改，并且这些更改将在服务端提交以进行持久化。

7.使用模板引擎创建模板

模板引擎是一个用于创建动态模板的工具。ExtJS有一个内置的模板引擎，可以让你创建动态模板，并使用数据自动填充模板。

以下代码演示了如何使用ExtJS的模板引擎创建一个简单的动态模板：

```

Ext.define('MyApp.view.Greeting', {

extend: 'Ext.Panel',

alias: 'widget.greeting',

tpl: '