ExtJS开发框架简介研讨.ppt

传感器注册 * 框架简介、环境搭建、helloWord示例 “富”的概念包含两方面，分别是指它具备丰富的用户界面和丰富的数据模型。富客户端技术充分利用本地机器的处理能力来处理数据，而不需要把某些数据发送到服务器处理，充分利用了本地机器的资源。 adapter ：负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。 package：存放的是ext的主题开发包 build ：压缩后的ext全部源码(里面分类存放)。 docs ： API帮助文档。 locale:Ext语言包。包含使用Ext的各国语言。 exmaples：提供使用ExtJs技术做出的小实例。 src：Ext UI资源文件目录，如CSS、图片文件都存放在这里面。 locale: 多国语言资源文件 resources ：无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU （LGPL） 开源的协议。 plugins：可能引入的一写插件。 ext-all.js ：压缩后的Ext全部源码。 ext-all-debug.js ：无压缩的Ext全部的源码(用于调试)。 基本上包含了我们开发所需要的各个组件 ExtJS 由一系列的类库组成，一旦页面成功加载了ExtJS 库后，我们就可以在页面中调用ExtJS 的类及控件来实现需要的功能。ExtJS 的类库由以下几部分组成： 底层API(core) 控件(widgets) 实用工具(Utils) 比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等， Ext 提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax 请求、Cookie 管理、CSS 管理等扩展等功能 Side Tabs treeGrid TreeGrid Ext JS开发框架简介 EXT简介 EXT常用组件 Ext框架 布局 Ext框架简介 什么是ext？ Ext是一个Ajax框架，可以用来开发带有华丽外观的富客户端应用。 Ext是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。 Ext必威体育精装版版本是ext6.0 Ext框架简介 Ext提供一系列的对象类，这些基本上都是用于处理WEB页面控件。 Ext的发布包括三个方面的内容：API参考手册、示例程序及开发包。 Ext框架简介 开发包 Ext框架简介 示例程序 Ext示例程序包共包括十六大类近100示例程序 。 Ext框架简介 API docs Ext类库简介 底层API(core)：底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询器等基础的功能。 其它控件都是建立在这些底层api 的基础上，底层api 位于源代码目录的dom 子目录中，包括Helper.js、Element.js 等文件。 Ext类库简介 控件(widgets)：指可以直接在页面中创建的可视化组件。 在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。 控件位于源代码目录的子目录中。 Ext类库简介 实用工具Utils：Ext 提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON数据解码或反解码、Date格式、Array存储、发送Ajax 请求、Cookie 管理、CSS 管理等扩展等功能 Accordion布局 Ext中布局的方式-- Ext.layout.Accordion 由类Ext.layout.Accordion定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式 在布局中配置不同的参数，会展示出不同的效果。 如：animate为true，表示在执行展开折叠时是否应用动画效果。 activeOnTop为true,表示在点击每一个子元素的头部名称或右边的按钮，则会展开该面板，收缩其它已经展开的面板，并将点击的那个面板置于顶部显示。 具体的各个控件的动作和效果大家可以参考API BorderLayout布局 Ext中布局的方式-- Ext.layout.BorderLayout 由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, center来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置 CardLayout布局 Ext中布局的方式--Ext.layout.CardLayout (选项卡)