关闭

关闭

关闭

封号提示

内容

首页 ExtJS实用开发指南.pdf

ExtJS实用开发指南.pdf

ExtJS实用开发指南.pdf

上传者: mws7801 2011-09-19 评分 0 0 0 0 0 0 暂无简介 简介 举报

简介:本文档为《ExtJS实用开发指南pdf》,可适用于IT/计算机领域,主题内容包含ExtJS实用简明教程收集整理:龚辟愚、QQ群:序言ExtJS是一个很不错的Ajax框架可以用来开发带有华丽外观的富客户端应用使得我们的bs应用更加符等。

ExtJS实用简明教程收集整理:龚辟愚、QQ群:序言ExtJS是一个很不错的Ajax框架可以用来开发带有华丽外观的富客户端应用使得我们的bs应用更加具有活力及生命力。ExtJS是一个用javascript编写与后台技术无关的前端ajax框架。因此可以把ExtJS用在Net、Java、Php等各种开发语言开发的应用中。最近我们在几个应用都使用到了ExtJS对公司以前开发的一个OA系统也正在使用ExtJS进行改造使得整个系统在用户体验上有了非常大的变化。本教程记录了前段时间本人学习ExtJS的一些心得及小结希望能帮助正在学习或准备学习ExtJS的朋友们快速走进ExtJS的精彩世界。教程包括ExtJS的新手入门、组件体系结构及使用、ExtJS中各控件的使用方法及示例应用等是一个非常适合新手的ExtJS入门教程。本教程主要是针对ExtJS进行介绍全部代码、截图等都是基于ExtJS。在学习了本教程后可以下载wlreasyjfcom这个基于ExtJS开发的单用户Blog系统的源代码这个系统是我们团队中的williamraym与大峡等人开发的一个演示系统系统源码整体质量比较高通过学习这套源代码相邻一定能提高您ExtJS的综合水平。本教程比较适合ExtJS的新手作为入门教程及手册使用并在我的博客http:wwweasyjfcombloglengyu上进行发布应一些朋友的要求根据本教程的写作思路我还编写了比本教程更为详细的《ExtJS实用开发指南》包含详细的ExtJS框架使用方法、各个控件详细配置参数、属性、方法及事件介绍与服务器端集成及一个完整的示例应用系统介绍等内容适合想深入学习ExtJS或正在使用ExtJS进行开发朋友们使用。该《指南》当前在wlreasyjfcom作为VIP文档发布供该站的VIP用户阅读及下载。凡是购买了《ExtJS实用开发指南》文档的VIP用户都可以在该指南印刷版出版后均会免费得到相应的印刷版本。最后希望广大网友把阅读本教程中的发现的错误、不足及建议等反馈给我们让我们一起共同学习、共同进步下面让我们一起进入精彩的ExtJS世界吧。http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:第一章、ExtJSExtJSExtJSExtJS简介ExtJS是一个Ajax框架是一个用javascript写的用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用下面是一些使用ExtJS开发的应用程序截图:(wlr的blog应用)http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:(ExtJS的表格控件)(不同主题的ExtJS弹出框效果)ExtJS是一个用javascript写的主要用于创建前端用户界面是一个与后台技术无关的前端ajax框架。因此可以把ExtJS用在Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术由开发人员JackSlocum开发通过参考JavaSwing等机制来组织可视化组件无论从UI界面上CSS样式的应用到数据解析上的异常处理都可算是一款不可多得的JavaScript客户端技术的精品。http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:第二章、开始ExtJSExtJSExtJSExtJS获得ExtJSExtJSExtJSExtJS要使用ExtJS那么首先要得到ExtJS库文件该框架是一个开源的可以直接从官方网站下载网址http:extjscomdownload进入下载页面可以看到大致如图xxx所示的内容可以选择选择或版本本教程使用的版本。图ExtJs不同版本下载选择页面单击上图中的【Downloadextzip】超链接进行下载把下载得到的ZIP压缩文件解压缩到【D:ExtCode】目录下可以得到如如图所示的内容。图ExtJS发布包目录adapter:负责将里面提供第三方底层库(包括Ext自带的底层库)映射为Ext所支持的底层库。build:压缩后的ext全部源码(里面分类存放)。docs:API帮助文档。exmaples:提供使用ExtJs技术做出的小实例。resources:ExtUI资源文件目录如CSS、图片文件都存放在这里面。source:无压缩Ext全部的源码(里面分类存放)遵从LesserGNU(LGPL)开源的协议。http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:Extalljs:压缩后的Ext全部源码。extalldebugjs:无压缩的Ext全部的源码(用于调试)。extcorejs:压缩后的Ext的核心组件包括sourcescore下的所有类。extcoredebugjs:无压缩Ext的核心组件包括sourcescore下的所有类。、应用ExtJSExtJSExtJSExtJS应用extjs需要在页面中引入extjs的样式及extjs库文件样式文件为resourcescssextallcssextjs的js库文件主要包含两个adapterextextbasejs及extalljs其中extbasejs表示框架基础库extalljs是extjs的核心库。adapter表示适配器也就是说可以有多种适配器因此可以把adapterextextbasejs换成adapterjqueryextjqueryadapterjs或adapterprototypeextprototypeadapterjs等。因此要使用ExtJS框架的页面中一般包括下面几句:在ExtJS库文件及页面内容加载完后ExtJS会执行ExtonReady中指定的函数因此可以用一般情况下每一个用户的ExtJS应用都是从ExtonReady开始的使用ExtJS应用程序的代码大致如下:fn也可以写成一个匿名函数的形式因此上面的代码可以改成下面的形式:<scripttype="textjavascript"src="extjsadapterextextbasejs"><script><scripttype="textjavascript"src="extjsextalljs"><script><script>functionfn(){alert(‘ExtJS库已加’)}ExtonReady(fn)<script><script>functionfn(){alert(‘ExtJS库已加载!’)}ExtonReady(function(){alert(‘ExtJS库已加载!’)})http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:、ExtJSExtJSExtJSExtJS版的HelloWorldHelloWorldHelloWorldHelloWorld下面我们写一个最简单的ExtJS应用在hellohtml文件中输入下面的代码:图hellohtml页面效果进一步我们可以在页面上显示一个窗口代码如下:<script><head><metahttpequiv="ContentType"content="texthtmlcharset="><title>ExtJS<title><linkrel="stylesheet"type="textcss"href="extjsresourcescssextallcss"><scripttype="textjavascript"src="extjsadapterextextbasejs"><script><scripttype="textjavascript"src="extjsextalljs"><script><script>ExtonReady(function(){ExtMessageBoxalert("hello","Hello,easyjfopensource")})<script><head><body><body><html>http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:在浏览hellohtml即可得在屏幕上显示一个窗口如图xxx所示。第三章ExtExtExtExt框架基础及核心简介、ExtExtExtExt类库简介ExtJS由一系列的类库组成一旦页面成功加载了ExtJS库后我们就可以在页面中通过javascript调用ExtJS的类及控件来实现需要的功能。ExtJS的类库由以下几部分组成:<script>ExtonReady(function(){varwin=newExtWindow({title:"hello",width:,height:,html:'<h>Hello,easyjfopensource<h>'})winshow()})<script>http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:底层API(core):底层API中提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。其它控件都是建立在这些底层api的基础上底层api位于源代码目录的core子目录中包括DomHelperjs、Elementjs等文件如图xx所示。控件(widgets):控件是指可以直接在页面中创建的可视化组件比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets子目录中包含如图xx所示。http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:实用工具Utils:Ext提供了很多的实用工具可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax请求、Cookie管理、CSS管理等扩展等功能如图所示:、ExtExtExtExt的组件Ext对框架进行了非常大的重构其中最重要的就是形成了一个结构及层次分明的组件体系由这些组件形成了Ext的控件Ext组件是由Component类定义每一种组件都有一个指定的xtype属性值通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。ExtJS中的组件体系由下图所示:http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:组件大致可以分成三大类即基本组件、工具栏组件、表单及元素组件。基本组件有:xtypeClassboxExtBoxComponent具有边框属性的组件ButtonExtButton按钮colorpaletteExtColorPalette调色板componentExtComponent组件containerExtContainer容器cycleExtCycleButtondataviewExtDataView数据显示视图datepickerExtDatePicker日期选择面板editorExtEditor编辑器editorgridExtgridEditorGridPanel可编辑的表格http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:、组件的使用组件可以直接通过new关键子来创建比如控件一个窗口使用newExtWindow()创建一个表格则使用newExtGridPanel()。当然除了一些普通的组件以外一般都会在构造函数中通过传递构造参数来创建组件。组件的构造函数中一般都可以包含一个对象这个对象包含创建组件所需要的配置属性及值组件根据构造函数中的参数属性值来初始化组件。比如下面的例子:gridExtgridGridPanel表格pagingExtPagingToolbar工具栏中的间隔panelExtPanel面板progressExtProgressBar进度条splitbuttonExtSplitButton可分裂的按钮tabpanelExtTabPanel选项面板treepanelExttreeTreePanel树viewportExtViewPort视图windowExtWindow窗口工具栏组件有toolbarExtToolbar工具栏tbbuttonExtToolbarButton按钮tbfillExtToolbarFill文件tbitemExtToolbarItem工具条项目tbseparatorExtToolbarSeparator工具栏分隔符tbspacerExtToolbarSpacer工具栏空白tbsplitExtToolbarSplitButton工具栏分隔按钮tbtextExtToolbarTextItem工具栏文本项表单及字段组件包含formExtFormPanelForm面板checkboxExtformCheckboxcheckbox录入框comboExtformComboBoxcombo选择项datefieldExtformDateField日期选择项fieldExtformField表单字段fieldsetExtformFieldSet表单字段组hiddenExtformHidden表单隐藏域htmleditorExtformHtmlEditorhtml编辑器numberfieldExtformNumberField数字编辑器radioExtformRadio单选按钮textareaExtformTextArea区域文本框textfieldExtformTextField表单文本框timefieldExtformTimeField时间录入项triggerExtformTriggerField触发录入项http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:运行上面的代码可以实现如下图所示的结果:可以省掉变量obj直接写成如下的形式:render方法后面的参数表示页面上的div元素id也可以直接在参数中通过renderTo参数来省略手动谳用render方法只需要在构造函数的参数中添加一个renderTo属性即可如下:对于容器中的子元素组件都支持延迟加载的方式创建控件此时可以直接通过在需要父组件的构造函数中通过给属性items传递数组方式实现构造。如下面的代码:注意中括号中加粗部份的代码这些代码定义了TabPanel这个容器控件中的子元素varobj={title:"hello",width:,height:,html:'Hello,easyjfopensource'}varpanel=newExtPanel(obj)panelrender("hello")<divid="hello"><div>varpanel=newExtPanel({title:"hello",width:,height:,html:'<h>Hello,easyjfopensource<h>'})panelrender("hello")NewExtPanel({renderTo:"hello",title:"hello",width:,height:,html:'<h>Hello,easyjfopensource<h>'})varpanel=newExtTabPanel({width:,height:,items:{title:"面板",height:},{title:"面板",height:},{title:"面板",height:}})panelrender("hello")http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:这里包括三个面板。上面的代码与下面的代码等价:前者不但省略掉了newExtPanel这个构造函数最重要前者只有在初始化TabPanel的时候才会创建子面板而第二种方式则在程序一开始就会创建子面板。也就是说前者实现的延迟加载。、组件的配置属性在ExtJS中除了一些特殊的组件或类以外所有的组件在初始化的时候都可以在构造函数使用一个包含属性名称及值的对象该对象中的信息也就是指组件的配置属性。比如配置一个面板:再比如创建一个按钮:varpanel=newExtTabPanel({width:,height:,items:newExtPanel({title:"面板",height:}),newExtPanel({title:"面板",height:}),newExtPanel({title:"面板",height:})})panelrender("hello")newExtPanel({title:"面板",html"面板内容",height:})http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:再比如创建一个Viewport及其中的内容:每一个组件除了继承基类中的配置属性以外还会根据需要增加自己的配置属性另外子类中有的时候还会把父类的一些配置属性的含义及用途重新定义。学习及使用ExtJS其中最关键的是掌握ExtJS中的各个组件的配置属性及具体的含义这些配置属性在下载下来的ExtJS源码文档中都有详细的说明可以通过这个文档详细了解每一个组件的特性如下图所示:varb=newExtButton({text:"添加",pressed:true,heigth:,handler:ExtemptyFn})newExtViewport({layout:"border",items:{region:"north",title:"面板",html:"面板内容",height:},{region:"center",xtype:"grid",title:"学生信息管理",store:troe,cm:colM,store:store,autoExpandColumn:}})http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:由于所有的组件都继承自ExtComponent因此在这里我们列出组件基类Component中的配置属性简单介绍。配置属性名称类型简介allowDoallowDoallowDoallowDomMovemMovemMovemMoveBoolean当渲染这个组件时是否允许移动Dom节点(默认值为true)。applyToapplyToapplyToapplyToMixed混合参数表示把该组件应用指定的对象。参数可以是节点的id一个DOM节点或一个存在的元素或与之相对应的在document中已出现的id。当使用applyTo也可以提供一个id或CSS的class名称如果子组件允许它将尝试创建一个。如果指写applyTo选项所有传递到renderTo方法的值将被忽略并且目标元素的父节点将自动指定为这个组件的容器。使用applyTo选项后则不需要再调用render()方法来渲染组件。autoShoautoShoautoShoautoShowwwwBoolean自动显示如为true则组件将检查所有隐藏类型的class(如:’xhidden’或’xhidedisplay’并在渲染时移除(默认为false)。clsclsclsclsString给组件添加额外的样式信息(默认值为'')如果想自定义组件或它的子组件的样式这个选项是非常有用的。ctClsctClsctClsctClsString给组件的容器添加额外的样式信息默认值为'')。disableddisableddisableddisabledClassClassClassClassString给被禁用的组件添加额外的CSS样式信息(默认为"xitemdisabled")。hideMohideMohideMohideModedededeString组件的隐藏方式支持的值有’visibility’也就是css里的visibility’offsets’负数偏移位置的值和’display’也就是css里的display默认值为’display’。hideParhideParhideParhideParententententBoolean是否隐藏父容器该值为true时将会显示或隐藏组件的容器false时则只隐藏和显示组件本身(默认值为false)。ididididString组件的id默认为一个自动分配置的id。listenerslistenerslistenerslistenersObject给对象配置多个事件监听器在对象初始化会初始化这些监听器。pluginspluginspluginspluginsObject一个对象或数组将用于增加组件的自定义功能。一个有效的组件插http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:关于ExtJS中组件的详细使用说明包括Component的属性Properties、方法及事件详细请参考wlreasyjfcom中的VIP文档《ExtJS组件Component详解()、()》。、ExtjsExtjsExtjsExtjs组件的事件处理ExtJS提供了一套强大的事件处理机制通过这些事件处理机制来响应用户的动作、监控控件状态变化、更新控件视图信息、与服务器进行交互等等。事件统一由ExtEventManager对象管理与浏览器WC标准事件对象Event相对应Ext封装了一个ExtEventObject事件对象。支持事件处理的类(或接口)为ExtutilObservable凡是继承该类的组件或类都支持往对象中添加事件处理及响应功能。首先我们来看标准html中的事件处理看下面的html代码:Array件必须包含一个init方法该方法可以带一个ExtComponent类型参数。当组件建立后如果该组件包含有效的插件将调用每一个插件的init方法把组件传递给插件插件就能够实现对组件的方法调用及事件应用等从而实现对组件功能的扩充。renderTrenderTrenderTrenderTooooMixed混合数据参数指定要渲染到节点的id一个DOM的节点或一个已存在的容器。如果使用了这个配置选项则组件的render()就不是必需的了。stateEvestateEvestateEvestateEventsntsntsntsArray定义需要保存组件状态信息的事件。当指定的事件发生时组件会保存它的状态(默认为none)其值为这个组件支持的任意event类型包含组件自身的或自定义事件。(例如:‘click’,’customerchange’)。stateIdstateIdstateIdstateIdString组件的状态ID状态管理器使用该id来管理组件的状态信息默认值为组件的id。stylestylestylestyleString给该组件的元素指定特定的样式信息有效的参数为ExtElementapplyStyles中的值。xtypextypextypextypeString指定所要创建组件的xtype用于构造函数中没有意义。该参数用于在容器组件中创建创建子组件并延迟实例化和渲染时使用。如果是自定义的组件则需要用ExtComponentMgrregisterType来进行注册才会支持延迟实例化和渲染。elelelelMixed相当于applyTo<script>functiona(){alert('something')}<script><inputid="btnAlert"type="button"onclick="a()"value="alert框">http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:点击这个按钮则会触发onclick事件并执行onclick事件处理函数中指定的代码这里直接执行函数a中的代码也即弹出一个简单的信息提示框。再简单修改一下上面的代码内容如下:上面的代码在文档加载的时候就直接对btnAlert的onclick赋值非常清晰的指明了按钮btnAlert的onclick事件响应函数为a注意这里a后面不能使用括号“()”。ExtJS中组件的事件处理跟上面相似看下面的代码:Extget("btnAlert")得到一个与页面中按钮btnAlert关联的ExtElement对象可以直接调用该对象上的addListener方法来给对象添加事件同样实现前面的效果。在调用addListener方法的代码中第一个参数表示事件名称第二个参数表示事件处理器或整个响应函数。ExtJS支持事件队列可以往对象的某一个事件中添加多个事件响应函数看下面的代码:addLinster方法的另外一个简写形式是on由于调用了两次addListener方法因此当点击按钮的时候会弹出两次信息。当然ExtJS还支持事件延迟处理或事件处理缓存等功能比如下面的代码:<script>functiona(){alert('something')}windowonload=function(){documentgetElementById("btnAlert")onclick=a}<script><inputid="btnAlert"type="button"value="alert框"><script>functiona(){alert('something')}ExtonReady(function(){Extget("btnAlert")addListener("click",a)})<script><inputid="btnAlert"type="button"value="alert框">ExtonReady(function(){Extget("btnAlert")on("click",a)Extget("btnAlert")on("click",a)})http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:由于在调用addListener的时候传递指定的delay为因此当用户点击按钮的时候不会马上执行事件响应函数而是在毫秒也就是两秒后才会弹出提示信息框。当然在使用Ext的事件时我们一般是直接在控件上事件每一个控件包含哪些事件在什么时候触发触发时传递的参数等在ExtJS项目的文档中都有较为详细的说明。比如对于所有的组件Component都包含一个beforedestroy事件该事件会在Ext销毁这一个组件时触发如果事件响应函数返回false则会取消组件的销毁操作。由于在窗口对象的beforedestroy事件响应函数返回值为false因此执行这段程序你会发现这个窗口将无法关闭。组件的事件监听器可以直接在组件的配置属性中直接声明如下面的代码与前面实现的功能一样:了解了ExtJS中的基本事件处理及使用方法就可以在你的应用中随心所欲的进行事件相关处理操作了。关于ExtJS中事件处理中作用域、事件处理原理、给自定义的组件添加事件、处理相关的ExtutilObservable及ExtEventManager类详细介绍请参考wlreasyjfcom中的VIP文档《ExtJS中的事件处理详解》。ExtonReady(function(){Extget("btnAlert")on("click",a,this,{delay:})})ExtonReady(function(){varwin=newExtWindow({title:"不能关闭的窗口",height:,width:})winon("beforedestroy",function(obj){alert("想关闭我这是不可能的!")objshow()returnfalse})winshow()})ExtonReady(function(){varwin=newExtWindow({title:"不能关闭的窗口",height:,width:,listeners:{"beforedestroy":function(obj){alert("想关闭我这是不可能的!")objshow()returnfalse}}})winshow()})http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:第四章、使用面板、PanelPanelPanelPanel面板Panel是ExtJS控件的基础很高级控件都是在面板的基础上扩展的还有其它大多数控件也都直接或间接有关系。应用程序的界面一般情况下是由一个一个的面板通过不同组织方式形成。面板由以下几个部分组成一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、面板主区域几个部分组件。面板类中还内置了面板展开、关闭等功能并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为面板可以放入其它任何容器中面板本身是一个容器他里面又可以包含各种其它组件。面板的类名为ExtPanel其xtype为panel下面的代码可以显示出面板的各个组成部分:运行该代码可以得到如图xx所示的输出结果清楚的表示出了面板的各个组成部分。一般情况下顶部工具栏或底部工具栏只需要一个而面板中一般也很少直接包含按钮一般会把面板上的按钮直接放到工具栏上面。比如下面的代码:ExtonReady(function(){newExtPanel({renderTo:"hello",title:"面板头部header",width:,height:,html:'<h>面板主区域<h>',tbar:{text:'顶部工具栏topToolbar'},bbar:{text:'底部工具栏bottomToolbar'},buttons:{text:"按钮位于footer"}})})ExtonReady(function(){newExtPanel({http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:可以得到如图xx所示的效果该面板包含面板Header一个顶部工具栏及面板区域三个部分。、工具栏面板中可以有工具栏工具栏可以位于面板顶部或底部Ext中工具栏是由ExtToolbar类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具栏可以直接通过面板的tools配置选项往面板头部加入预定义的工具栏选项。比如下面的代码:renderTo:"hello",title:"hello",width:,height:,html:'<h>Hello,easyjfopensource!<h>',tbar:{pressed:true,text:'刷新'}})})ExtonReady(function(){newExtPanel({renderTo:"hello",title:"hello",width:,height:,html:'<h>Hello,easyjfopensource!<h>',tools:{id:"save"},{id:"help",http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:注意我们在Panel的构造函数中设置了tools属性的值表示在面板头部显示三个工具栏选项按钮分别是保存"save"、"help"、"close"三种。代码运行的效果图如下:点击help按钮会执行handler中的函数显示一个弹出对话框而点击其它的按钮不会有任何行为产生因为没有定义他们的heanlder。除了在面板头部加入这些已经定义好的工具栏选择按钮以外还可以在顶部或底工具栏中加入各种工具栏选项。这些工具栏选项主要包括按钮、文本、空白、填充条、分隔符等。代码:handler:function(){ExtMsgalert('help','pleasehelpme!')}},{id:"close"},tbar:{pressed:true,text:'刷新'}})})ExtonReady(function(){newExtPanel({renderTo:"hello",title:"hello",width:,height:,html:'<h>Hello,easyjfopensource!<h>',tbar:newExtToolbarTextItem('工具栏:'),{xtype:"tbfill"},{pressed:true,text:'添加'},{xtype:"tbseparator"},{pressed:true,text:'保存'}})})http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:将会得到如图xx所示的结果:Ext中的工具栏项目主要包含下面的类:ExtToolbarButton-按钮xtype为tbbuttonTextItem-ExtToolbarFill-Separator-Spacer-SplitButton-、选项面板的TabPanelTabPanelTabPanelTabPanel在前面的示例中为了显示一个面板我们需要在页面上添加一个然后把Ext控件渲染到这个div上。VeiwPort代表整个浏览器显示区域该对象渲染到页面的body区域并会随着浏览器显示区域的大小自动改变一个页面中只能有一个ViewPort实例。看下面的代码:运行上面的代码会得到如图xxx所示的输出结果。ExtonReady(function(){newExtViewport({enableTabScroll:true,layout:"fit",items:{title:"面板",html:"",bbar:{text:"按钮"},{text:"按钮"}}})})http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:Viewport不需要再指定renderTo而我们也看到Viewport确实填充了整个浏览器显示区域并会随着浏览器显示区域大小的改变而改改。Viewport主要用于应用程序的主界面可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport上常用的布局有fit、border等当然在需要的时候其它布局也会常用。看下面的代码:ExtonReady(function(){newExtViewport({enableTabScroll:true,layout:"border",items:{title:"面板",region:"north",height:,html:"<h>网站后台管理系统!<h>"},{title:"菜单",region:"west",width:,collapsible:true,html:"菜单栏"},{xtype:"tabpanel",region:"center",http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:运行上面的程序会得如图xx所示的效果。第五章、窗口及对话框、窗口基本应用ExtJS中窗口是由ExtWindow类定义该类继承自Panel因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。看下面的代码:items:{title:"面板"},{title:"面板"}}})})http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:页面中的html内容:执行上面的代码当点击按钮“新窗口”的时候会在页面中显示一个窗口窗口标题为“窗口x”窗口可以关闭可以最大化点击最大化按钮会最大化窗口最大化的窗口可以还原如图xxx所示。、窗口分组窗口是分组进行管理的可以对一组窗口进行操作默认情况下的窗口都在默认的组ExtWindowMgr中。窗口分组由类ExtWindowGroup定义该类包括bringToFront、getActive、hideAll、sendToBack等方法用来对分组中的窗口进行操作。vari=functionnewWin(){varwin=newExtWindow({title:"窗口"i,width:,height:,maximizable:true})winshow()}ExtonReady(function(){Extget("btn")on("click",newWin)})<inputid="btn"type="button"name="add"value="新窗口">http:downzzbaikecomebook。ExtJS实用简明教程收集整理:龚辟愚、QQ群:

用户评论(0)

0/200

精彩专题

上传我的资料

每篇奖励 +2积分

资料评价:

/13
仅支持在线阅读

意见
反馈

立即扫码关注

爱问共享资料微信公众号

返回
顶部