ExtJS4.2.1快速入门：从HelloWorld到TabPanel

"这篇教程是关于ExtJS 4.2.1的基础入门，主要涵盖了如何配置ExtJS，以及展示了一些基本组件的创建方法，包括Hello World提示框、面板及选项卡面板的创建，并展示了相应的代码示例和效果图片。" 在深入探讨ExtJS 4.2.1之前，首先要知道ExtJS是一个用于构建富客户端Web应用程序的JavaScript库，它提供了一套完整的组件化开发框架。ExtJS 4.2.1是该框架的一个稳定版本，具有强大的UI组件和数据绑定机制。 1. ExtJS的配置 在开始使用ExtJS时，需要引入必要的文件。对于4.2.1版本，通常需要包含以下三个核心文件： - `ext-all.css`：这是ExtJS的样式表，包含了所有组件的基本样式。 - `ext-all.js`：这个JavaScript文件包含了ExtJS的核心库，提供了大部分功能和组件。 - `Ext.Base.js`：基础类库，用于实现ExtJS的一些核心机制。 引入这些文件的方法是在HTML文件中添加对应的`<link>`和`<script>`标签，如下所示： ```html <link rel="stylesheet" type="text/css" href="css/ext-all.css" /> <script type="text/javascript" src="js/ext-all.js"></script> <script type="text/javascript" src="js/Ext.Base.js"></script> ``` 2. 示例：Hello World 在ExtJS中，可以使用`Ext.MessageBox.alert`来弹出一个提示框，展示简单的消息。下面是一个简单的Hello World示例： ```javascript Ext.onReady(function() { Ext.MessageBox.alert("hello", "helloWorld"); }); ``` `Ext.onReady`函数确保在DOM加载完成后再执行其内部的代码，避免了DOM未加载完成导致的错误。 3. 创建面板（Panel） 创建一个面板可以使用`Ext.Panel`，以下代码创建了一个具有标题、宽度、高度和内容的面板： ```javascript Ext.onReady(function() { var myPanel = new Ext.Panel({ renderTo: Ext.getBody(), title: '哈哈哈', width: 300, height: 300, html: 'test面板' }); }); ``` `renderTo`属性指定了面板渲染到哪个元素，`Ext.getBody()`通常表示渲染到页面的body部分。 4. 创建选项卡面板（TabPanel） 要创建一个选项卡面板，可以使用`Ext.TabPanel`，并添加多个`Ext.Panel`作为子项： ```javascript var panel = new Ext.TabPanel({ renderTo: Ext.getBody(), width: 300, height: 200, activeTab: 0, items: [ new Ext.Panel({ title: "面板1", height: 30, html: '面板1内容！' }), new Ext.Panel({ title: "面板2", height: 30, html: '面板2内容！' }), new Ext.Panel({ title: "面板3", height: 30, html: '面板3内容！' }) ] }); ``` 5. 创建面板工具栏（Toolbar） 在面板上添加工具栏，可以使用`Ext.Toolbar`，如下所示： ```javascript new Ext.Panel({ renderTo: Ext.getBody(), title: "GO,GO,GO,上去就是干！", // 添加工具栏 dockedItems: [{ xtype: 'toolbar', items: [/* 工具栏按钮或组件 */] }] }); ``` 以上就是ExtJS 4.2.1入门的基本步骤，通过这些基础知识，开发者可以开始构建自己的用户界面。随着对框架理解的加深，可以利用其丰富的组件库和强大的数据绑定功能，创建复杂且交互丰富的Web应用。