ExtJs入门(适合新手)课件.ppt

Ext JS框架入门培训 2011.08.11 ; 一、 Ext Js 简 介 二、 Ext Js类库 三、 Ext Js基础组件 四、 ExtJs布局 ;什么是ext？ Ext是一个Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。 Ext是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。 Ext最新版本是ext4.0 ;界面示例一; 界面示例二; 获得ExtJS 要使用ExtJS，那么首先要得到ExtJS 库文件，该框架是一个开源的，可以直接从官方 网站下载，地址： / /products/extjs/download 最新版本为Ext JS 4.0.2a (收费)，3.0及以前版本不收费。; ;adapter：负责将里面提供第三方底层库（包括Ext 自带的底层库）映射为Ext 所支持的底层库。 air： Ext对基于Air可视化编辑器的支持。 build： 压缩后的ext 全部源码(里面分类存放)。 docs： API 帮助文档。 exmaples：提供使用ExtJs 技术做出的小实例。 package：Ext提供常用控件。 resources：Ext UI 资源文件目录，如CSS、图片文件都存放在这里面。 source： 无压缩Ext 全部的源码(里面分类存放) 遵从Lesser GNU （LGPL） 开源的协议。;Ext-all.js：压缩后的Ext 全部源码。 ext-all-debug.js：无压缩的Ext 全部的源码(用于调试)。 ext-core.js：压缩后的Ext 的核心组件，包括sources/core 下的所有类。 ext-core-debug.js：无压缩Ext 的核心组件，包括sources/core 下的所有类。;EXT API参考手册 ;htmlhead meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleExtJS/title link rel=stylesheet type=text/css href=extjs/resources/css/ext-all.css / script type=text/javascript src=extjs/adapter/ext/ext-base.js/script script type=text/javascript src=extjs/ext-all.js/script script Ext.onReady(function() { Ext.MessageBox.alert(hello,Hello,easyjf open source); }); /script /head body /body/html; hello.html页面效果;EXTJs 比其他JS框架的优势：; 一、 Ext Js 简 介 二、 Ext Js类库 三、 Ext Js基础组件 四、 ExtJs布局 ;ExtJS 由一系列的类库组成，一旦页面成功加载了ExtJS 库后，我们就可以在页面中调用ExtJS 的类及控件来实现需要的功能。ExtJS 的类库由以下几部分组成： 底层API(core) 控件(widgets) 实用工具(Utils) ;底层API(core)：底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询器等基础的功能。其它控件都是建立在这些底层api 的基础上，底层api 位于源代码目录的core 子目录中，包括DomHelper.js、Element.js 等文件。 ;控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets 子目录中。 ;实用工具Utils：Ext 提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON数