EXtJs3.2.docxVIP

ExtJSExtJS是一个Ajax框架，是一个用JavaScript写的，用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用.ExtJS主要用于创建前端用户界面，是一个与后台技术无关的前端Ajax框架。因此，可以把ExtJS用在.Net、Java、PHP等各种开发语言开发的应用中。ExtJS最开始基于YUI技术。1.1. ExtJS体验要应用ExtJS需要在页面中引入extjs的样式以及extjs库文件，样式文件为resources/css/ext-all.css，extjs的js库主要包括两个，adapter/ext/ext-base.js及ext-all.js，其中ext-base.js表示框架基础库，ext-all.js是extjs的核心库。adapter表示适配器，也就是说可以有多种适配器，因此，可以把adapter/ext/ext-base.js换成adapter/jquery/ext-jquery-adapter.js，或adapter/prototype/ext-prototype-adapter.js等。因此，要使用ExtJS框架的页面中一般包括以下几句：程序1-1script src=../ext-3.2.1/adapter/ext/ext-base-debug.js/scriptscript src=../ext-3.2.1/ext-all-debug.js/script注意：这两条语句的顺序绝对不能互换。在ExtJS库文件及页面内容加载完后，ExtJS会执行Ext.onReady中指定的函数，一般情况下，一个ExtJS应用都是从Ext.onReady开始的。1.1.1. ExtJS版的HelloWorld程序1-2link rel=stylesheet type=text/css href=../ext-3.2.1/resources/css/ext-all.css /script src=../ext-3.2.1/adapter/ext/ext-base-debug.js/scriptscript src=../ext-3.2.1/ext-all-debug.js/scriptscriptExt.onReady(function(){Ext.MessageBox.alert(Status, Changes saved successfully.);})/script显示效果如图1-1所示。图1-1 HelloWorld一个含内容的窗口的代码，如程序1-3所示程序1-3link rel=stylesheet type=text/css href=../ext-3.2.1/resources/css/ext-all.css /script src=../ext-3.2.1/adapter/ext/ext-base-debug.js/scriptscript src=../ext-3.2.1/ext-all-debug.js/scriptscriptExt.onReady(function(){var win=new Ext.Window({title:面板1,html:面板内容1,height:100});win.show();})/script显示效果如图1-2所示。图1-2 含有内容的窗口1.2. 框架基础组件可以直接通过new关键字来创建，比如新建一个窗口，可以使用new Ext.Window(),创建一个表格则使用new Ext.gridPanel()。当然，除了一些普通的组件以外，一般都会在构造函数中通过传递参数来创建组件。组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性及值，组件根据构造函数中的参数属性值来初始化组件。比如下面的例子：程序1-4link rel=stylesheet type=text/css href=../ext-3.2.1/resources/css/ext-all.css /script src=../ext-3.2.1/adapter/ext/ext-base-debug.js/scriptscript src=../ext-3.2.1/ext-all-debug.js/scriptscriptvar user={title:我是弹出框,html:你好,width:200,height:200,}Ext.onReady(function(){var panel=new Ext.Panel(user);panel.render(panel);});/script显示效果如图1-3所示。图1-3 弹出框对于容器中的子元素组件，都支持延迟加载的方式创建控件，此时可以直接通过在需要父组件的构造函数中通