ExtJS入门教程

ExtJS作为一款前端开发框架，在当今的前端开发领域中已经拥有了较高的知名度和庞大的用户群体。作为一个ExtJS初学者，入门学习是必不可少的一步。本文将为大家介绍ExtJS入门教程，实现快速入门的效果。

1、环境搭建

首先，我们需要下载ExtJS的SDK，并完成其环境搭建。目前最新版本为ExtJS7.3，我们可以在官方网站进行下载。下载完成后，需要将SDK中的ext文件夹拷贝到项目中。

2、基本用法

ExtJS的基本用法非常简单，其主要有两个部分组成：Ext.onReady()与Ext.create()。其中，前者用于代码的初始化，后者用于组件的创建。

下面是一个简单的示例，创建了一个窗口组件：

Ext.onReady(function(){

Ext.create('Ext.window.Window',{

title: 'Hello ExtJS',

width: 400,

height: 300,

layout: 'fit',

items: [{

html: 'Hello World!'

}]

}).show();

});

在上述代码中，我们通过Ext.create()方法创建了一个窗口组件，其中设置了窗口的宽度、高度、标题和布局方式。该窗口中包含了一个html控件，显示文本为“Hello World!”。使用.show()方法，将窗口显示出来。

3、布局

布局可以说是ExtJS中最为重要的一部分。框架提供了许多不同的布局方式，包括：vbox、hbox、form、border等等，通过不同的布局方式，我们可以实现不同的效果。

下面是一个简单的布局示例：

Ext.onReady(function(){

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

title: '布局示例',

width: 400,

height: 300,

layout: 'vbox',

items: [{

xtype: 'panel',

title: '面板一',

height: 100,

flex: 1

},{

xtype: 'panel',

title: '面板二',

height: 100,

flex: 1

},{

xtype: 'panel',

title: '面板三',

height: 100,

flex: 2

}]

});

Ext.create('Ext.container.Viewport', {

layout: 'fit',

items: panel

});

});

在上述代码中，我们创建了一个容器，使用了vbox布局方式。该容器中包含了三个面板，每个面板的高度均为100像素，并使用了flex属性进行布局。其中，前两个面板的flex属性均为1，表示它们的高度将均等分。第三个面板的flex属性为2，表示其高度将是前两个面板高度的两倍。

4、组件

ExtJS拥有许多内置组件，包括按钮、文本框、标签页等等。使用这些组件，可以快速地搭建出一个功能完备的界面。

下面是一个简单的示例，展示了如何创建一个按钮组件，并在点击时弹出对话框：

Ext.onReady(function(){

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

text: 'Click Me!',

handler: function(){

Ext.Msg.alert('提示', 'Hello ExtJS!');

}

});

Ext.create('Ext.container.Viewport', {

layout: 'fit',

items: button

});

});

在上述代码中，我们创建了一个按钮组件，使用了Ext.Msg.alert()方法弹出对话框。在按钮的handler属性中指定该操作，即在按钮被点击时执行该操作。

5、数据加载

在实际开发中，我们需要从服务器端获取数据。ExtJS提供了许多方式用于实现数据加载，最常用的方式是使用Ext.Ajax.request()方法。

下面是一个简单的示例，展示了如何使用Ext.Ajax.request()从服务器端获取数据：

Ext.onReady(function(){

Ext.Ajax.request({

url: 'data.json',

method: 'GET',

success: function(response, options){

var data = Ext.decode(response.responseText);

console.log(data);

},

failure: function(response, options){

console.log('Request Failed...');

}

});

});

在上述代码中，我们使用了Ext.Ajax.request()方法，指定了请求的url和请求方法。在success属性中指定处理成功后的回调函数，其中使用Ext.decode()方法将服务器返回的JSON数据进行解码。在failure属性中指定处理失败后的回调函数。

6、总结

通过本文的介绍，相信大家已经初步了解了ExtJS的基本用法，并可以开始编写自己的第一个ExtJS应用了。当然，ExtJS的功能远不止于此，还有许多细节需要不断学习和掌握。希望本文能够为大家提供一个良好的学习起点，让初学者们能够更快地掌握ExtJS开发。