extjs学习文档.doc

EXTJS学习文档 目录 1 什么是ExtJS 3 它的功能 3 Ajax主流框架与ExtJS 3 Extjs基本概念： 4 组件—component 4 类—class 4 方法—method 5 事件—event 5 配置选项—config option 5 属性—property 5 命名空间—namespace 6 ExtJs基本使用方法 6 Ext框架基础及核心简介 11 EXT组件 13 基本组件有： 13 组件的使用 15 组件的配置属性 18 常用组件： 22 窗口的基本应用 22 对话框的基本应用 23 面板的基本应用 26 工具栏 28 VeiwPort 31 布局Layout 34 使用表格控件 46 TreePanel基本使用 71 Toolbar 81 什么是ExtJS 　ExtJs初期仅是对Yahoo! UI的对话框扩展，后来逐渐有了自己的特色，深受网友的喜爱。 发展至今， Ext除YUI外还支持Jquery、Prototype等的多种JS底层库，让大家自由地选择。该框架完全基于纯Html/CSS+JS技术，提供丰富的跨浏览器UI组件，灵活采用JSON/XML数据源开发，使得服务端表示层的负荷真正减轻，从而达到客户端的MVC应用！ 它的功能 ExtJS是一个非常棒的Ajax框架，可以用来开发富有华丽外观的富客户端应用，能使b/s应用更加具有活力。ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用程序中。无论是界面之美，还是功能之强，ext的表格控件都高居榜首。 Ajax主流框架与ExtJS 　　JQuery、 Prototype和YUI都属于非常核心的JS库。　　Ext可以单独使用。实际上，除了有特定的要求，推荐单独使用Ext，这样的话文件占位更小，支持和整合也更紧密。　Ext也支持与jQuery、 YUI或Prototype整合使用，作为低层库的角色出现，以提供处理各种核心的服务，如DOM和事件处理，Ajax连接和动画特效。使用整合方式的一个原因是它们已具备了一些特定的器件而Ext并没有原生支持——像YUI的History控件便是一个典型的例子。这时，Ext需要依赖YUI这个库的底层来实现History控件，这样一来的话也可免去Ext自身底层库，从而减少了整个程序的内存占用。另一个使用整合方式的原因是，对于许多已在使用其他底层库的程序，你可能希望逐步加入Ext。总之，如果已经有了其他库，Ext可已利用它们。我们的宗旨是为用户提供各种可能性和性能上的优化。而事实是，只要实现了相对应的底层库接口，为任意一个框架添加上适配器是没有问题的——人们可以轻松地将Dojo、Moo、Ajax.NET，或其它JS库转变为 Ext的底层。 Extjs基本概念： 组件—component 能够以图形化的形式呈现界面的类，其中还可分为容器组件与元件组件 容器组件：能够包含其他容器组件或者元件组件的类，是进行单元化组件开发的基础 元件组件：能图形化形式表现一个片面功能的组件 类—class 提供功能的非图形的类，它们为图形类提供了有力支持。按其功能可分为：数据支持类data，拖放支持类dd，布局支持类layout，本地状态存储支持类state，实用工具类util 密封类：不能被扩展的类 原型类：扩展了JavaScript标准类库中的类 方法—method 作为类的功能体现，能够产生改变对象本身产生变化的直接因素。方法按访问形式可分为公有方法和私有方法。但由于JavaScript从原理上根本不支持这种结构，因此在EXTJS中，私有与公有方法，完全凭借用户自觉，没有JAVA那样的强制性。 事件—event 由类定义的，并且可以在类对象自身状态发生改变的触发。只有被订阅的事件才会有效，如果不需要此事件，要进行退订，以增强程序执行效率 配置选项—config option 用以初始化一个EXTJS类对象的手段 注意：配置选项不一定就是属性。就算是属性，也有可能出现属性返回的类型与你当初指定的配置选项类型不一致的情况。 属性—property 在程序运行期间，能够被访问，用以了解当前类对象的状态 在实际编程中，EXTJS的属性设置比较差劲，需要了解其源代码，才能了解各种实用属性的用途 命名空间—namespace 能够将编写好的EXTJS类进行有效组织的手段，这也是EXTJS能够被称为优秀AJAX框架的特征之一。 ExtJs基本使用方法 1. 在eclipse中新建一个WEB SERVICE工程 2. 将EXTJS整个文件夹拖到新建工程的 WEBROOT文件夹下 3. 在WEBROOT文件夹下新建HTM