ExtJS4入门教程:构建‘Hello Ext’程序

需积分: 10 4 下载量 195 浏览量 更新于2024-09-11 收藏 265KB PDF 举报
"ext4.0入门教程 - 一个适合初学者的ExtJS框架学习指南" 在本文中,我们将深入探讨如何开始使用ExtJS 4,一个强大的JavaScript前端框架,特别适用于构建复杂的桌面级Web应用程序。ExtJS 4提供了一套完整的组件模型、数据绑定和布局管理,使得开发者能够构建出具有高度交互性和美观界面的应用。 首先,让我们来看看入门所需的基本条件: 1. **浏览器支持**:ExtJS 4兼容所有主流浏览器,包括Chrome、Safari和Firefox的最新版本。为了方便调试,建议使用这些浏览器。 2. **本地服务器环境**:作为一名Web开发人员,设置一个本地服务器环境是必备技能。可以安装Apache服务器,并将项目部署在本地服务器上。 3. **ExtJS 4 SDK**:访问官方网站下载最新版本的ExtJS SDK,并将其解压缩到你的Web服务器根目录。解压后,确保可以通过http://localhost/extjs/index.html访问到欢迎页面。 接下来,我们关注程序的架构: 2.1 **目录结构**:推荐采用以下结构组织你的项目: - `appName`:包含所有程序代码,作为根目录。 - `app`:存放所有类,按命名空间规则创建子目录。 - `extjs`:放置ExtJS 4 SDK。 - `resources`:存储CSS和图片等资源文件。 - `app.js`:程序入口点。 - `index.html`:入口文件。 在开始编写代码之前,先创建一个简单的"Hello Ext"程序。在Web服务器根目录下创建一个名为`helloext`的目录,然后放入`app.js`和`index.html`两个文件。将ExtJS SDK解压到`helloext`目录并重命名为`extjs`。在`index.html`中,引入必要的CSS和JavaScript文件,如下所示: ```html <html> <head> <title>HelloExt</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"> <script type="text/javascript" src="extjs/ext-debug.js"></script> <script type="text/javascript"> // 在这里编写你的JavaScript代码 </script> </head> <body> </body> </html> ``` 现在,你已经准备好开始编写你的第一个ExtJS程序。在JavaScript部分,你可以创建一个基本的窗口组件显示"Hello Ext": ```javascript Ext.onReady(function() { var win = new Ext.Window({ title: 'Hello Ext', width: 300, height: 200, html: '你好,Ext!', renderTo: document.body }); win.show(); }); ``` 这段代码会在页面加载完成后创建一个窗口,并显示文本"你好,Ext!"。`Ext.onReady`函数确保在DOM完全加载后执行代码,`new Ext.Window`创建了一个新的窗口实例,设置了标题、大小、内容以及渲染位置。 随着你对ExtJS 4的深入学习,你会逐渐掌握如何利用其组件系统、数据模型、布局管理器以及丰富的API来构建功能丰富的Web应用。不要忘记查看官方文档、示例和社区资源,它们将是你学习过程中宝贵的参考资料。