ExtJS入门:探索FormPanel与基础组件

需积分: 1 0 下载量 47 浏览量 更新于2024-08-18 收藏 3.24MB PPT 举报
"这篇资源主要介绍了ExtJS框架的基础知识,特别是如何创建一个简单的FormPanel,并提供了获取和理解ExtJS框架的途径。" 在JavaScript的世界中,ExtJS是一个强大的富客户端应用开发框架,它允许开发者创建具有高度交互性和美观界面的Web应用程序。ExtJS的核心特性在于它的组件模型和丰富的布局管理,这使得开发者可以轻松构建复杂的用户界面。框架本身是用JavaScript编写的,与后端技术无关,因此它可以无缝集成到.Net、Java、Php等多种开发环境中。 在介绍中提到了ExtJS的几个重要版本,最新提及的是4.0.2a,但需要注意的是,4.0版本之后的ExtJS开始实行收费策略,而3.0及其以前版本则是免费的。要获取ExtJS库文件,可以访问官方网站,如http://extjs.org.cn/或http://www.sencha.com/products/extjs/download,下载所需的版本。 ExtJS的发布包包含多个目录,每个都有特定的功能: 1. `adapter`:包含了适配器,用于与第三方底层库(包括Ext自己的底层库)对接,确保ExtJS能在不同环境中运行。 2. `air`:支持基于Adobe Air的可视化编辑器。 3. `build`:存放压缩后的所有源码。 4. `docs`:提供API帮助文档,对于学习和开发非常有用。 5. `examples`:包含了一系列使用ExtJS技术实现的小实例,便于初学者学习和参考。 6. `package`:提供了一些预定义的组件和控件,加速开发过程。 7. `resources`:存储CSS样式文件、图片等UI资源。 8. `source`:存放未压缩的完整源码,遵循LGPL开源协议,方便调试和扩展。 9. `ext-all.js`:压缩版的完整ExtJS库。 10. `ext-all-debug.js`:未压缩的完整源码,适用于开发和调试。 11. `ext-core.js`:压缩后的核心组件,包含`sources/core`下的所有类。 12. `ext-core-debug.js`:未压缩的核心组件源码。 在HTML页面中引用ExtJS库时,通常会包含`ext-all.js`或`ext-all-debug.js`,前者用于生产环境,后者用于开发环境,因为包含详细的错误信息。同时,还需要引用相关的CSS文件,例如`resources/css/ext-all.css`,来应用样式。 要创建一个简单的FormPanel,首先需要导入ExtJS库,然后定义Panel的配置,包括其布局、字段和按钮等。例如: ```html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>简单FormPanel示例</title> <link rel="stylesheet" type="text/css" href="path/to/ext/resources/css/ext-all.css"> <script src="path/to/ext/ext-all.js"></script> <script> Ext.onReady(function() { var formPanel = new Ext.form.Panel({ title: '简单表单', bodyPadding: 10, items: [{ xtype: 'textfield', fieldLabel: '姓名' }, { xtype: 'textfield', fieldLabel: '邮箱' }], buttons: [{ text: '提交', handler: function() { // 提交表单逻辑 } }] }); Ext.create('Ext.container.Viewport', { layout: 'fit', items: [formPanel] }); }); </script> </head> <body></body> </html> ``` 这个示例展示了如何创建一个包含两个文本字段和一个提交按钮的FormPanel。`Ext.onReady`函数在DOM加载完成后执行,`Ext.form.Panel`定义了表单面板,`items`属性包含了表单字段,`buttons`属性定义了按钮及其点击事件处理程序。 通过这种方式,开发者可以利用ExtJS的强大功能构建功能丰富的Web应用程序,提供卓越的用户体验。深入学习ExtJS API文档,了解不同组件和布局的用法,是掌握这个框架的关键。