"这篇文档是关于ExtJS 4.0的中文学习指南,旨在帮助初学者了解和掌握ExtJS框架。文档提供了从下载ExtJS、搭建开发环境到编写基本示例的步骤,以及如何访问API文档和示例页面。"
在深入探讨ExtJS 4.0之前,首先需要理解它是一个什么框架。ExtJS是一个用于构建富客户端Web应用的JavaScript库,它提供了丰富的组件库,包括表格、菜单、窗体、树形视图等,使得开发者能够构建出功能强大的、用户界面友好的Web应用程序。ExtJS 4.0版本带来了许多改进,包括性能优化、新的布局系统和数据包,以及更加模块化的架构。
**获取与搭建环境**
1. 下载ExtJS:你可以从官方站点(http://extjs.org.cn/)获取所需的ExtJS发行版及其支持文件。
2. 搭建环境:确保已安装了集成开发环境(如MyEclipse)和Web服务器(如Tomcat)。在MyEclipse中创建一个新的Web项目,并将解压后的ExtJS 4.0.7文件复制到项目的Webroot目录下。
3. 部署并启动Tomcat,然后通过浏览器访问`http://localhost:8080/Ext4/index.html`来检查环境是否配置成功。
**API文档与示例**
1. 访问API文档:在浏览器中打开`http://localhost:8080/Ext4/docs/index.html`,这里包含了ExtJS 4.0的所有类、方法和配置选项的详细说明,是学习ExtJS的重要参考资料。
2. 浏览示例:通过`http://localhost:8080/Ext4/examples/index.html`查看官方提供的各种示例,这些示例涵盖了框架的多种功能,有助于理解和学习。
**编写第一个示例 - Hello World**
1. 创建`helloworld.js`文件,编写基本的Panel代码,定义面板的标题和内容。
2. 创建`helloworld.html`文件,引入必要的CSS和JavaScript文件,确保路径正确。
3. 在浏览器中访问`http://localhost:8080/Ext4/helloworld.html`,如果一切正常,你应该能看到一个带有“HelloExt”标题和“Hello! Welcome to ExtJS.”内容的Panel。
**常用方法**
- `Ext.onReady`:这是在DOM加载完成之后自动调用的方法,确保在此时执行的代码不会因DOM元素未加载而报错。
- `Ext.application`:这是初始化ExtJS应用的核心方法,用于配置应用的元数据,包括命名空间、控制器、模型、视图、存储和路由等。
在学习过程中,可以尝试在`Ext.onReady`函数中添加代码,观察页面的变化,以加深对ExtJS事件处理和组件操作的理解。同时,不断地实践和参考API文档及示例,将有助于快速掌握ExtJS 4.0的精髓。