ExtJS4.2.1快速入门:从HelloWorld到TabPanel
需积分: 10 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应用。
2016-10-31 上传
点击了解资源详情
2016-01-27 上传
2014-01-23 上传
2022-03-23 上传
2022-01-09 上传
2013-07-12 上传
Mr_Tao123
- 粉丝: 0
- 资源: 1
最新资源
- Android圆角进度条控件的设计与应用
- mui框架实现带侧边栏的响应式布局
- Android仿知乎横线直线进度条实现教程
- SSM选课系统实现:Spring+SpringMVC+MyBatis源码剖析
- 使用JavaScript开发的流星待办事项应用
- Google Code Jam 2015竞赛回顾与Java编程实践
- Angular 2与NW.js集成:通过Webpack和Gulp构建环境详解
- OneDayTripPlanner:数字化城市旅游活动规划助手
- TinySTM 轻量级原子操作库的详细介绍与安装指南
- 模拟PHP序列化:JavaScript实现序列化与反序列化技术
- ***进销存系统全面功能介绍与开发指南
- 掌握Clojure命名空间的正确重新加载技巧
- 免费获取VMD模态分解Matlab源代码与案例数据
- BuglyEasyToUnity最新更新优化:简化Unity开发者接入流程
- Android学生俱乐部项目任务2解析与实践
- 掌握Elixir语言构建高效分布式网络爬虫