Extjs4.0学习指南(中文).docx资源-CSDN下载

需积分: 4 110 浏览量 2013-08-27 13:18:16 上传评论收藏 2.16MB DOCX 举报

### Extjs4.0 学习指南 #### 一、Extjs简介与获取 Extjs是一款基于JavaScript的前端框架，用于构建复杂的Web应用程序。它提供了一系列丰富的用户界面组件和工具，帮助开发者快速创建功能强大的应用。 - **获取Extjs** 可以通过官方网站或者国内镜像站点获取Extjs的发布包及相关支持资源。例如，可以通过[http://extjs.org.cn/](http://extjs.org.cn/)下载所需版本的Extjs。目前，Extjs4.0的资源相对较少，因此寻找合适的文档和教程尤为重要。 #### 二、搭建开发环境为了能够顺利地进行Extjs4.0的学习与开发，首先需要搭建一个基本的开发环境。以下是一些推荐的步骤： 1. **安装MyEclipse和Tomcat** - 确保已安装MyEclipse集成开发环境。 - 安装并配置Tomcat服务器。 2. **创建Web项目** - 在MyEclipse中新建一个Web项目，并命名为“Extjs4”。 3. **导入Extjs库** - 将Extjs4.0.7的压缩包解压，并将所有文件复制到项目的WebRoot目录下。 - Examples目录包含了官方提供的示例代码，可以作为参考学习。 4. **部署项目** - 将项目部署到Tomcat服务器，并启动服务器。 5. **测试环境** - 打开浏览器，访问`http://localhost:8080/Ext4/index.html`，如果看到初始页面，说明环境搭建成功。 #### 三、初步实践 - **API文档与示例页面** - API文档：`http://localhost:8080/Ext4/docs/index.html` - 示例页面：`http://localhost:8080/Ext4/examples/index.html` #### 四、编写第一个程序接下来，我们将编写一个简单的程序来熟悉Extjs的基本用法。 1. **创建`helloWorld.js`** ```javascript Ext.onReady(function(){ new Ext.Panel({ title: 'Hello Ext', html: 'Hello! Welcome to ExtJS.', renderTo: Ext.getBody() }); }); ``` 2. **创建`helloWorld.html`** ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <script type="text/javascript" src="adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-all-debug.js"></script> <script type="text/javascript" src="helloWorld.js"></script> </head> <body> </body> </html> ``` 3. **运行程序** - 访问`http://localhost:8080/Ext4/helloworld.html`，可以看到一个包含标题和内容的面板。 #### 五、基础概念与常用API - **Ext.onReady** 该方法在DOM加载完成后执行指定的函数，确保页面元素可以被脚本访问。 - **Ext.get** 通过ID获取页面元素。例如，`var myDiv = Ext.get('myDiv');`可以获取ID为`myDiv`的元素。 - **Ext.select** 使用CSS选择器获取页面元素。例如，`var ps = Ext.select('p');`可以获取所有的`<p>`标签。 #### 六、布局管理 Extjs提供了多种布局选项来组织用户界面元素。 - **Fit布局** 子元素将自动填充其父容器的空间。在Fit布局下，设置子元素的宽度无效。如果存在多个子元素，则仅显示第一个。 - **示例代码** ```javascript Ext.create('Ext.window.Window', { title: 'Fit Layout Example', width: 400, height: 300, layout: 'fit', items: [ { xtype: 'grid', ... } ] }).show(); ``` - **Border布局** Border布局允许子元素占据容器的四个边缘或中心区域。这种布局非常适合创建多面板的界面，每个面板都有自己的空间。 - **示例代码** ```javascript Ext.create('Ext.panel.Panel', { title: 'Border Layout Example', width: 400, height: 300, layout: 'border', items: [ { xtype: 'grid', region: 'center' }, { xtype: 'toolbar', region: 'north' }, { xtype: 'toolbar', region: 'south' }, { xtype: 'toolbar', region: 'west' }, { xtype: 'toolbar', region: 'east' } ] }).show(); ``` #### 七、小结通过以上步骤，您可以搭建起一个完整的Extjs4.0开发环境，并且了解了如何使用一些基本的功能。接下来，建议深入学习Extjs的各种组件和API，不断实践和探索，以便更好地掌握这个强大的前端框架。

资源推荐

资源详情

资源评论