extjs经典学习教程

ExtJS不但在Web开发中成功引入了丰富的组件，也引入了桌面程序中经常用到的面板Web34特点及使用方式是突破ExtJS页面设计的关键，下面先来进行面板部分的学习。 使用 Delphi、VisualBasic或JavaSwing等开发语言的读者对面板（Panel）一定非常中面板同样起着页面骨架的作用，所以学习面板是学习ExtJS页面布局的基础和起点。ExtJS面板从使用方式上来说更接近于JavaSwing中的面板，通过为其指定不同的布局toolbarstoolbars（header（bodynewExt.Panel({tbar:['顶端工具栏(toptoolbars)'],new]5-1行快速的浏览，Ext.Panel主要配置项目如表5-1所示。5-1Ext.Panel是否使用自动高度，true则使用自动高度，false设置是否自动显示滚动条，true则设置面板的bodyoverflow:'auto'，内容溢出时会自动显示滚动条，false则不显示滚动条对溢出的内容进行截断。默认为false'这是是否显示面板体（body）的边框，true则显示，false'或收缩按钮，falsetrue设置面板在第一次渲染时是否处于收缩状态，true则收缩，false面板中元素的默认类型，默认为应用到面板容器中所有元素的配置对象，例如：true会导致面板显示在负偏移的位置，从而面板不可见，因为浮动例如会被忽略，而直接创建footer元素设置是否渲染面板，true则渲染面板为自定义的圆角边框，falsetitleheaderfalseheaderheadertitle，true则显示，默认为true则隐藏面板容器中所有组件的边框，falsefloatingtruetrue显示在面板头部的标题信息Tools配置项主要用来设置面板头部功能区所要显示的各类按钮，每个按钮的配置对象可能包含的配置项在表5-2中说明，toolsid与按钮图标对应关系如表5-3所示。5-2tools点击按钮后触发的处理函数，参数包括：eventExt.EventObject、toolElExt.Element、Panel5-3toolsid5.1.2节中常用配置项的使用及效源的内容，分为4个示例分别讲解4种不同的方式为面板提供显示内容，它们分别是：autoLoad配置项设置要加载的远程页面url地址，同时展示了面板折叠和滚动条的效果，请看下面的示例代码。varpanel=newExt.Panel({autoScroll:true,//自动显示滚动条collapsibletrue,//允许展开和收缩applyTo:'panel',autoLoad:'page1html自动加载面板体的默认连接<div5-2autoLoad时自动显示滚动条。效果如图5-2~5-4所示。图5-2面板加载远程页面读取状 图5-3面板加载远程页面读取完5-4配置项，它的作用就是指定在面板中所要显示的本地资源id，看下面的示例代码。varpanel=newExt.Panel({collapsible:true,autoScroll:true,autoHeight://autoHeight:applyTo:'panel', <tableborder=1<tr><thcolspan=2>本地资源员工列表<thwidth60>序号</th><thwidth80>姓名table表格作为内容展示在了面板当中，这种方式省略了远程页面的读取过程，现滚动条。运行效果如图5-5和5-6所示。图5-5面板加载本地资源固定高 图5-6面板加载本地资源自动高示例使用面板的html配置项，通过它就可以实现自定义面板内容的目的，看下面的示例。<script<scripttype="text/javascript">Ext.BLANK_IMAGE_URL='../../extjs2.0/resources/images/default/s.gif';varhtmlArray=['<table'<tr><tdcolspan=2>员工列表'<tr><thwidth60>序号</th><thwidth80>姓名</th><tr>',varpanel=newtitle:'使用html配置项自定义面板内容', collapsible autoScroll:true, applyTo:'panel',html: html配置项给了我们动态组织面板内容的途径，在代码5-7中首先创建了字符串数组htmlArrayjoin方法将数组内容连接为整体供程序使用，读者也可以5-7使用html参数，所以将分2个示例分别讲解。varpanel=newExt.Panel({varpanel=newExt.Panel({ collapsible:true, autoHeight:true, //自动高度width:189, applyTo:'panel',items:new 5-6中会演示向面板中添加多个组件的方法。运行效果如图5-5所示。5-8通过items<script<scriptvarpanel=newExt.Panel({header:height:200,width:250,defaults:{ height collapsible autoScroll items:newtitle:'嵌套面板一',newtitle:'嵌套面板二',]<tableborder=1<tr><thcolspan=2>本地资源员工列表<thwidth60>序号</th><thwidth80>姓名5-6演示了向面板中添加多个组件的方法，items5-95-10图5-9嵌套面板加载页面过程 图5-10嵌套面板加载页面完希望的位置上。ExtJS通过提供多种布局类来为面板提供支持，主要包括如下10种：

Ext.layout.ContainerLayout提供了所有布局类的基本功能，它没有可视化的外观，只是new关键字直接创建。如果面板（panel）没有指定任何布局类，则它将会作为默认布局来创建，表5-4是主要配置项。5-4Extlayout.ContainerLayout一个对当前活动组件的引用。activeItem只在那些一次只能显示一个items项目的布局中生效，例如：Ext.layout.AccordionExt.layout.FitLayout是布局的基础类，对应面板布局配置项（layout）fit，使fit布局将使面板子元素自动充满容器，如果在当前容器中存在多个子面板则只有第一个xtypenewvarpanel=newExt.Panel({layout:'fit',varpanel=newExt.Panel({layout:'fit',height:width:defaults: items:{html:'面板一'{html:'面板二'}]层面板，而“嵌套面板二”并没有显示出来。运行效果如图5-11所示。5-11Ext.layout.FitLayoutExt.layout.AccordionExt.layout.FitLayout布局，对应面板布局（layout）配置项每个子面板都内置了对展开和收缩功能的支持。表5-5列出了它的主要配置项目。5-5Extlayout.Accordion设置在展开或收缩子面板时是否使用滑动方式，true设置是否隐藏子面板的“展开收缩”按钮，true表示隐藏，false代码varpanel=newExt.Panel({layoutConfig:{ fill:true, hideCollapseTool:false, titleCollapse:true, height:width:250,defaults:{items:{html:'说明一'{html:'说明二'},,{html:'说明三'}]5-8Accordion图5-12Ext.layout.Accordion布局示 图5-13Ext.layout.Accordion布局示setActiveItem方法，它接受一个子面板人员自己实现。Ext.layout.CardLayout主要方法如表5-6所示。5-6Extlayout.CardLayoutsetActiveItem(String/Numberitem):varpanel=newExt.Panel({layout:activeItem height:width:defaults:{'//items:items:{html:'说明一',id:{html:'说明二',id:},{html:'说明三',id:}{text:'上一页',{text:'下一页',}]functionif(btn.text=='上一页'){index-=if(index<index=}index+=if(index>index=}}}代码5-9演示了CardLayoutsetActiveItemidchangePage函数的用途是计算点击面板的切换。运行效果如图5-14~5-15所示。 5-14Ext.layout.CardLayout布局示例5-15Ext.layout.CardLayoutExt.layout.AnchorLayout是根据容器大小为其所包含的子面板进行定位的布局，对应面板布局（layout）anchor。如果容器大小发生变化，所有子面板的位置都会根据规则重新计算，并自动渲染。使用anchor布局需要注意以下配置项的使用。anchoranchorSizeanchor布anchorSizeanchor布局就anchoranchor2其中的子面板进行定位，有效值包括如下3类。（Pecentage1100%1/2，如果只提供一个值（如：'50%'）则只对（Offsets参考边（Sides'right'（或'r'）和'bottom'（或b。要求容器设置anchorSize配置项才会有正确的效果，例如'rb'，说明父容器会计5-10中创建一个使用百分比方式为子面板进行定位的示例，从示例中可以清晰varpanel=newExt.Panel({layout:framefalse,height:width:defaults:{items:{anchor:'50%50%', title:'子面板'}]%5-16Ext.layout.AnchorLayout布局示例（百分比定位5-11中创建一个使用偏移值为子面板进行定位的示例，从示例中可以清晰的体varpanel=newExt.Panel({layout:'anchor',framefalse,//渲染面板height:width:300,items:{anchoranchor10 title子面板}]5-11演示了偏移值（Offsets）定位的使用方式，其中anchor:'-10-10',105-175-17Ext.layout.AnchorLayout布局示例（偏移值定位5-12中创建一个使用参考边为子面板进行定位的示例，从示例中可以清晰的体varpanel=newExt.Panel({layout:'anchor',varpanel=newExt.Panel({layout:'anchor',autoScroll:true,//自动显示滚动条framefalse,//渲染面板height:width:300,defaultsitems:{anchor:'rb', width:200,height:100,}]5-12演示了参考边（Sides）anchorrb',,决定了子面板将相对于父面板的右边和底边的差值进行定位。运行效果如图5-18所示。771155-18Ext.layout.AnchorLayout布局示例（参考边定位父容器体(body)父容器体(body)298（说明：300减去左右两条边的宽度=100（说明：父容器体(body)300–200）计算后的子容器宽度为=198（说明：298-100）高度差值为=50（说明：父容器高度150–子容器高度100）=73（说明：123-absolutex/y坐标进行定位，并且坐标值支持varpanel=newExt.Panel({layout:'absolute',framefalse,height:width:300,defaults:{'//items:{x y width:height:title子面板一{x y width:height:title子面板二}}]5-13演示了AbsoluteLayout（绝对位置布局）xy5-195-19Ext.layout.AbsoluteLayoutExt.layout.FormLayout是为表单特殊设计的布局，用来管理表单字段的显示，通常情况下直接使用Ext.form.FormPanel表单面板，因为它已经内置了表单布局，并且提供了表单提)labelPad:(Number)5，该项只在提供labelWidth配置项的情况下生效。)Ext.form.Field类的组件可以)fieldLabelString)：字段标签上的文本，默认为''))5-7Extlayout.FormLayout应用到每一个布局中元素上的样式类，默认为面板，这个面板最终生成的效果与第4章中介绍的FormPanel相同。varpanel=varpanel=Ext.Panel({t布局示例layoutlabelSeparator:height:width:300,defaults:{items:{allowBlank:false{}]5-14FormLayout（表单布局）的使用方式，通过表单布局创建的面板与使用FormPanel创建的表单面板功能相同。运行效果如图5-20所示。5-20Ext.layout.FormLayout行变化，它支持一个特殊的属性columnWidth，每一个加入到容器中的子面板都可以通过columnWidth配置项指定百分比或使用width配置项指定固定值，来确定列宽。width1的数字。columnWidth配置项是已百分比为单位的相对宽度，必须是大于01的小数，例如“.25varpanel=Ext.Panel({title:'Ext.layout.ColumnLayout布局示例',layout:'column',height:width:250,defaultsframe:trueitems:{ height:{ height:}]项用于设置列宽。运行效果如图5-21所示。5-21Ext.layout.ColumnLayout布局示例（固定列宽varpanel=Ext.Panel({title:'Ext.layout.ColumnLayout布局示例',layout:'column',height:width:250,varpanel=Ext.Panel({title:'Ext.layout.ColumnLayout布局示例',layout:'column',height:width:250,defaultsframe:trueitems:{ height:{ height:}]代码5-16演示了ColumnLayout（列布局）使用百分比指定列宽的用法，子面板的columnWidth配置项用于设置列对应的百分比。运行效果如图5-22所示。5-22Ext.layout.ColumnLayout布局示例（百分比列宽3070%，请看下面的代码。Ext.BLANKIMAGEURL='../../extjs2.0/resources/images/default/s.gif';varvarpanel=Ext.Panel({title:'Ext.layout.ColumnLayout布局示例',layout:'column',height:width:350,frame:trueitems:{width height:{ height:{ height:}]固定列宽之后剩余的宽度值。运行效果如图5-23所示。5-23Ext.layout.ColumnLayout布局示例（固定值与百分比结合==100（width配置项指定的固定值。第二列宽度=（350–100）*0.3（说明：按比例分割剩余宽度。=（350100）*0.7（说明：按比例分割剩余宽度（columns（rowspan（colspanvarpanel=newExt.Panel({varpanel=newExt.Panel({layout:'table',layoutConfig:columns44height:150,defaultsframe:true,height:items:{colspan {rowspan2设置跨行height:100]TableLayot至右进行顺序排列的。效果如图5-24所示。5-24Ext.layout.TableLayoutExt.layout.BorderLayoutlayoutborder。该布局包含多个west、north、centerregion配置项来告知容器要加入到那可以形象的展示border布局的结构。varpanel=newExt.Panel({titlevarpanel=newExt.Panel({titleExt.layout.BorderLayout布局示例',height:width:400,items:[{html:'上边',region:'north', height:50{html:'下边',region:'south', height:50html:'左边', width:100html:'右边', width:100html:'中间', 5-25Ext.layout.BorderLayoutExt.Viewportdocumentbody作为渲染对象，它会borderViewPort中，以使主面板充满整个newExt.Viewport({titlenewExt.Viewport({titleExt.Viewport示例items:[{html:'上边',region:'north',height:100html:'左边',width:150html:'中间',合完美的实现了页面整体结构的划分，是构建主页面常用的方式，效果如图5-26所示。5-26Ext.ViewportExt.TabPanel扩展自Ext.Paneltab页都是一个Ext.Panel，一般情况下会有多5-8列出了Ext.TabPanel的主要配置项，会在后续的示例中用到其中的部分内容。5-8Ext.TabPaneltab页滚动的时候起用动画效果，true设置是否在tab设置每次滚动tabtab标签在面板上的位置，包括'top'和'bottom'，默认值是设置tab页的初始宽度，默认为120像素。该项只在vartabPanel=newExt.TabPanel({heightvartabPanel=newExt.TabPanel({height:width:activeTab:0, //默认激活第一个tab页animScroll:true, //使用动画滚动效果enableTabScroll:true, applyTo:'panel',items:{title:tab1',htmltab1内容{title:tab2',htmltab2内容{title:tab3',htmltab3内容{title:tab4',htmltab4内容{title:tab5',htmltab5内容]子面板加入items的顺序排列。运行效果如图5-27所示。5-27Ext.TabPanel（items）一方式，Ext.TabPaneldivtab页的功能，为tab页的生成提供了新的方法。autoTabSelector5-22是简单的示例，用于通过 <script vartabPanel=newExt.TabPanel({height:width: deferredRender:false, activeTab:0, animScroll:true, enableTabScroll:true, applyTo:'panel'<divdivdiv并没有被正确的转换为一个tab页图5-28Ext.TabPanel（转换div即时渲染）示 图5-29Ext.TabPanel（转换div延时渲染）示</div>5divdiv6个是无效的divtabtab页的动态添加3tab页的简单Ext.TabPaneladd（）ta