一、布局 实例.doc

一布局实例1.BorderJavascript源码：/*LayoutBorder布局实例*author9iE**三人行-取之于网,用之于网!*/Ext.BLANK_IMAGE_URL=./ext/resources/images/default/s.gif;/applicationmainentrypointExt.onReady(function()Ext.QuickTips.init();/*创建本部容器采用panel作为容器*/varnorthPanel=newExt.Panel(title:北,/设置panel的标题region:north,/用来制定该panel处于哪个位置height:100,/设置panel的高度split:true,/添加分割线是否可以改变该panel的大小minSize:40,/设置拖动的最小拖动值maxSize:100,/设置拖动的最大拖动值collapsible:true,/是否让panel能自动缩放collapseMode:mini,/在分割线处出现按钮html:北部容器);varsouthPanel=newExt.Panel(title:南,region:south,width:100,height:100,split:true,/添加分割线是否可以改变该panel的大小minSize:40,/设置拖动的最小拖动值maxSize:100,/设置拖动的最大拖动值collapsible:true,/是否让panel能自动缩放collapseMode:mini,/在分割线处出现按钮html:南部容器);varwestPanel=newExt.Panel(title:西,region:west,width:100,height:50,split:true,/添加分割线是否可以改变该panel的大小minSize:40,/设置拖动的最小拖动值maxSize:100,/设置拖动的最大拖动值collapsible:true,/是否让panel能自动缩放collapseMode:mini,/在分割线处出现按钮html:西部容器);vareastPanel=newExt.Panel(title:东,region:east,width:100,height:50,split:true,/添加分割线是否可以改变该panel的大小minSize:40,/设置拖动的最小拖动值maxSize:100,/设置拖动的最大拖动值collapsible:true,/是否让panel能自动缩放collapseMode:mini,/在分割线处出现按钮html:东部容器);varcenterPanel=newExt.Panel(title:中,region:center,html:中部容器);/*创建一个整体的容器，用来填充其他的容器并将这个容器renderTo（渲染）到页面的某一个标签上*/varmainPanel=newExt.Panel(layout:border,border:true,items:northPanel,southPanel,westPanel,eastPanel,centerPanel);/createandshowwindowvarwin=newExt.Window(id:layout_border-win,width:650,height:450,minWidth:300,minHeight:200,plain:true,title:Ext.fly(page-title).dom.innerHTML,layout:fit,border:false,closable:false,items:mainPanel);win.show();); Html源码：Border布局实例-9iExt中文社区2.accordion布局Javascript源码：/*LayoutAccordion布局实例*author9iE**三人行-取之于网,用之于网!*/Ext.BLANK_IMAGE_URL=./ext/resources/images/default/s.gif;/applicationmainentrypointExt.onReady(function()Ext.QuickTips.init();/*/vartreePanel=newExt.tree.TreePanel(autoScroll:true,enableDD:true,/是否支持拖拽效果containerScroll:true,/是否支持滚动条rootVisible:false,/是否显示跟节点loader:newExt.tree.TreeLoader(dataUrl:user.json);/菜单根节点varroot=newExt.tree.AsyncTreeNode(draggable:false);treePanel.setRootNode(root);root.expand();varitem1=newExt.Panel(title:QQ好友,layout:fit,border:false,items:treePanel);varitem2=newExt.Panel(title:通讯录,html:通讯录);varitem3=newExt.Panel(title:QQ群/社区,html:QQ群/社区);varitem4=newExt.Panel(title:最近联系人,html:最近联系人);varaccordion=newExt.Panel(layout:accordion,/在此设置为accordion布局/*layoutConfig为布局的配置参数主要有三个属性分别为:1.titleCollapse:默认是就是true，点击标题就可以折叠子面板，如果设置成false，就只能点击title右边的图标折叠子面板。2.animate:展开折叠的时候是否使用动画效果呢。3.activeOnTop:默认值是false，进行展开折叠后，子面板的顺序不会改变，如果改成true，就会随着展开折叠改变顺序，就是总把展开的子面板放在最上头啦。*/layoutConfig:titleCollapse:true,animate:true,activeOnTop:false,items:item1,item2,item3,item4);/createandshowwindowvarwin=newExt.Window(id:layout_accordion-win,width:220,height:450,minWidth:300,minHeight:200,plain:true,title:Ext.fly(page-title).dom.innerHTML,layout:fit,border:false,closable:false,items:accordion);win.show(););Html源码：Accordion布局实例-9iExt中文社区3.card布局：Javascript源码：/*LayoutCard布局实例*author9iE**三人行-取之于网,用之于网!*/Ext.BLANK_IMAGE_URL=./ext/resources/images/default/s.gif;/applicationmainentrypointExt.onReady(function()Ext.QuickTips.init();varcard=newExt.Panel(id:card-wizard-panel,layout:card,/在此设置为card布局activeItem:0,/让向导页处于第一个位置bodyStyle:padding:15px,defaults:border:false,bbar:-,id:card-prev,text:上一页,handler:cardNav.createDelegate(this,-1),disabled:true,id:card-next,text:下一页,handler:cardNav.createDelegate(this,1),items:id:card-0,html:欢迎使用LayoutCard示例向导!这是第一步,共三步请单击下一页继续.,id:card-1,html:这是第二步,共三步请单击下一页继续.,id:card-2,html:成功了!这是第三步,共三步-完成!);/向导切换functioncardNav(incr)varl=Ext.getCmp(card-wizard-panel).getLayout();vari=l.activeItem.id.split(card-)1;varnext=parseInt(i)+incr;l.setActiveItem(next);Ext.getCmp(card-prev).setDisabled(next=0);Ext.getCmp(card-next).setDisabled(next=2);/createandshowwindowvarwin=newExt.Window(id:layout_card-win,width:400,height:300,minWidth:300,minHeight:200,plain:true,title:Ext.fly(page-title).dom.innerHTML,layout:fit,border:false,closable:false,items:card);win.show();); Html源码：Card布局实例-9iExt中文社区二Ext经典布局一 Javascript源码：/*LayoutClassic经典布局实例*author9iE**三人行-取之于网,用之于网!*/Ext.BLANK_IMAGE_URL=./ext/resources/images/default/s.gif;Espace(ExtExample);/创建名字域/应用程序主页面ExtExample.app=function()/空函数;Ext.extend(ExtExample.app,Ext.util.Observable,/顶端header:newExt.BoxComponent(region:north,el:north,height:30,margins:5),/低端footer:newExt.BoxComponent(region:south,el:south,height:25),/实例菜单树形menuTree:newExt.tree.TreePanel(title:实例菜单,region:west,id:extExample-tree,autoScroll:true,enableDD:false,/是否支持拖拽效果containerScroll:true,/是否支持滚动条split:true,width:180,minSize:175,maxSize:300,rootVisible:true,/是否显示跟节点collapseMode:mini,/在分割线处出现按钮collapsible:true,margins:0055,loader:newExt.tree.TreeLoader(dataUrl:layout_classic1_tree.json),tools:id:refresh,handler:function()vartree=Ext.getCmp(extExample-tree);tree.root.reload();),/菜单根节点menuRoot:newExt.tree.AsyncTreeNode(text:ExtJs2.0实例展示,draggable:false,id:source),/主要显示区main:newExt.TabPanel(region:center,enableTabScroll:true,activeTab:0,margins:0550,items:newExt.Panel(id:workPing,title:首页,border:false,autoLoad:layout_classic1_info.html),/初始化构造函数init:function()this.menuTree.setRootNode(this.menuRoot);this.menuRoot.expand();/给树形菜单添加事件this.menuTree.on(click,this.menuClickAction,this);/给main的tab页面添加tabchange事件this.main.on(tabchange,this.changeTab,this);varmyView=newExt.Panel(layout:border,border:false,items:this.header,this.main,this.footer,this.menuTree);/createandshowwindowvarwin=newExt.Window(id:layout_classic1-win,width:600,height:400,minWidth:300,minHeight:200,plain:true,title:Ext.fly(page-title).dom.innerHTML,layout:fit,border:false,closable:false,items:myView);win.show();/新建一个maskthis.loadMask=newExt.LoadMask(this.main.body,msg:页面加载中);,/属性菜单的点击事件menuClickAction:function(node)/*if(!node.isLeaf()returnfalse;vartabId=tab-+node.id;vartabTitle=node.text;vartablink=node.attributes.link;vartabJsArray=node.attributes.jsArray;/得到js文件存放的路径vartab=this.main.getComponent(tabId);/得到tab组建if(!tab)tab=this.main.add(newExt.Panel(id:tabId,title:tabTitle,autoScroll:true,layout:fit,border:false,closable:true);this.main.setActiveTab(tab);varloadmask=this.loadMask;varmodel;/加载模块js预置变量名loadmask.show();/panel组建开始异步加载url的htmltab.load(url:tablink,/加载的url/加载html成功后的回调函数callback:function(a,b,c)varjsStr=;/创建一个空字符串，用来装载接受的js文件内容varnum=tabJsArray.length;for(vari=0;inum;i+)/由于异步加载的html不能以的方式加载javascript所以在此再调用一个ajax异步加载模块的js文件vartabjs=tabJsArrayi.js;/取得数组中的js文件varcurrentIndex=i;/获取当前js文件的索引Ext.Ajax.request(method:POST,/为了不丢失js文件内容，所以要选择post的方式加载js文件url:tabJsArrayi.js,scope:this,success:function(response)jsStr+=response.responseText;/把每次加载的内容都存入jsStr中if(currentIndex=num-1)/如果当前索引号为最后一个时开始创建应用的实例/获取模块类thisnode.id=eval(jsStr);/实例化模块类model=newthisnode.id();loadmask.hide();/之所以要重写tabpanel的destroy函数，是因为在要执行每个实例类的自定义的destroy函数。/原因在于，用IE在有些情况下不能完全释放实例。/比如“树的高级应用（一）”实例中的window对象，如果该对象不执行destroy函数时再此打开时会报错。tab.on(destroy,function()model.destroy(););,failure:function(response)Ext.Msg.show(title:错误信息,msg:加载页面核心文件时发生错误！,buttons:Ext.MessageBox.OK,icon:Ext.MessageBox.ERROR);loadmask.hide(););if(b=false)Ext.Msg.show(title:错误信息,msg:加载页面超时或是页面连接不正确！,buttons:Ext.MessageBox.OK,icon:Ext.MessageBox.ERROR);loadmask.hide();,discardUrl:false,nocache:true,text:,timeout