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

需积分: 10 0 下载量 74 浏览量 更新于2024-09-10 收藏 225KB DOC 举报
"这篇教程是关于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应用。