ExtJS详细学习PPT 2.pptVIP

Ext 扩展内容 本章任务 学会使用Ext 本章目标 了解Ext 掌握Ext的使用 Ext简介 Ext ExtJS 是一个Ajax 框架，是一个用javascript 写的，用于在客户端创建丰富多彩的web 应用程序界面 ExtJS 可以用来开发RIA(Rich Internet Application，富互联网应用系统)的开源AJAX 应用框架，使用的开源协议是GPL。 ExtJS 是一个用javascript 写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax 框架。因此，可以把ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。 ExtJs 最开始基于UI 技术，由开发人员Jack Slocum 开发，通过参考Java Swing 等机制来组织可视化组件，无论从UI 界面上CSS 样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript 客户端技术的精品。 Ext使用 Ext库位于一个 JavaScript 文件中，其中包含了所有的 Ext 控件。 使用 引入js文件 编写js代码使用ext script type=text/javascript src=plugins/extjs/ext-2.2/adapter/ext/ext-base.js/script script type=text/javascript src=plugins/extjs/ext-2.2/ext-all.js/script script Ext.BLANK_IMAGE_URL = plugins/extjs/ext-2.2/resources/images/default/s.gif; Ext.QuickTips.init(); Ext.onReady(function(){ …///在这里面创建及使用ext 控件。 }); /script 这个方法会 在DOM 加载全部完毕后，保证页面内的所有元素能被Script 引用（reference）之后调用。 Ext 组件-简介 所谓组件，简单来说，就是指可以复用的应用程序组成部件。Ext 最大特点就是拥有一个庞大、功能齐全、结构及层次分明的组件体系，并在组件的基础上进一步封装出各种实用的控件。我们在开发的时候，只需要直接使用这些组件及控件，就可以创建出丰富多彩的应用程序界面。比如说窗口、树、表格、选项板、工具栏、菜单等都是可以直接复用的组件及控件。 Ext 组件是由Component 其及子类定义，每一种组件都有一个指定的xtype 属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。 我们学习及使用Ext，其实也就是学习Ext 组件/控件的各种功能及使用方法。 Ext组件结构图 Ext-组件XType 在Ext 中，每一个组件都有一个类来定义，比如说按钮组件的类是Ext.Button 类，窗口控件的类Ext.Window，树控件的类是Ext.tree.TreePanel。除了可以通过类名来标识某一种组件以外，Ext 还提出了一个xtype 的概念，我们可以理解为组件类名的缩写，比如说 Ext.tree.TreePanel 类对应的类缩写名称为treepanel。当一个组件创建了以后，我们可以通过组件的getXType()方法来得到这个组件的xtype 值，还可以通getXTypes()方法来得到这个组件所属的所有类名，比如：component/box/field/textfield。xtype 的主要作用是通过在配置选项中指定xtype 方的组件使用法，来实现组件的延迟初始化 Ext-组件应用 第一种就是前面我们已经接触到的使用new 操作符来创建一个组件对象实例，然后通过这个对象实例就能使用这个组件了。 第二种方法是当在定义父容器中的子元素时（这里的子元素也是组件），比如窗口中放按钮、放树等。可以通过xtype 这个属性来指定使用一个组件 方法一： var panel=new Ext.Panel({title:面板,width:500,height:300}); panel.add(new Ext.Button({text:按钮一})); panel.add(new Ext.Panel({title:子面板})); 方法二： var panel=new Ext.Panel({title:面板,width:500,height:300}); panel.add({xtype:button,text:按钮一}); panel.add({title:子面板}); 方法二的其他写法：通过构造函数的items属性添加 var panel=new Ext.Panel({title:面板,width:500,height:300,