LearningExtJS_new 之 Layout 的应用学习(五)

Ext.onReady(function(){//1.使用布局(第一个布局)//1>认识布局中的几个元素 panel 小容器,region 小容器存放位置,viewport 大容器//2>布局中的参数 //@collapsible 是否可以折叠,双击时折叠//@collapseMode 折叠模式,出现小图标//@minSize 拖拉的最小宽度//@maxSize 拖拉的最大宽度//@margins 上下左右间格度//@cmargins 折叠时间格度//@bodyStyle 内容样式//2.使用tab panel//1>使用tabpanel时,把原来xtype找成tabpanel(注意这里大小写敏感),增加activeTab项(可选),配置items项//2>增加gridPanel到对应的tab项中,增加xtype:'grid',配置对应的store和cm项//3>使用accordion 配置title和autoLoad()//3.增加工具栏//1>类型 为toolbar,设置items选项//4.增加form//1>类型 为form ,设置items选项//5.嵌套布局//1>设置 在已有的布局中,增加layout为border.配置items选项,//2>设置图标,ie:iconCls:'de',//6.给viewport设置ID值//1>getCmp 取容器,findById,取容器中的子元素//2>根据需要动态增加 tabpanelvar store =  new Ext.data.Store({//定义数据 datadata:[["de.png",1,"Office Space","Mike Judge","1999-02-19",1,"Work Sucks","19.95",1],["us.png",3,"Super Troopers","Jay Chandrasekhar","2002-02-15",2,"Altered State Police","14.95",2]],reader:new Ext.data.ArrayReader({id:"id"},['image','id','title','director',{name: 'released', type: 'date', dateFormat: 'Y-m-d'},'genre','tagline','price','available'])});var myFirstViewport = new Ext.Viewport({layout:"border",//描述布局类型renderTo:Ext.getBody(),id:"myFirstViewport",items:[{region:"north",xtype:"toolbar",items:[{xtype:"tbspacer"},{xtype:"tbbutton",text:"button",handler:function(btn){btn.disable();}},{xtype:"tbfill"}]},{region:"west",xtype:"form",//html:"西",split:true,width:400,collapsible: true,title:"西方",collapseMode:"mini",minSize:100,maxSize:250,margins:'10 0 0 3',cmargins:'1 0 0 3',bodyStyle:'padding:5px;',items:[{xtype:"textfield",fieldLabel:"标题",name:"title"},{xtype:"textfield",fieldLabel:"导演",name:"director",vtype:"name"},{xtype:"datefield",fieldLabel:"发布日期",name:'released'},{//radioxtype:"radio",fieldLabel:"影片颜色",boxLabel:"黑白",name:"rdFilmColor",checked:true},{xtype:"radio",hideLabel:false,//default false labelSeparator:"",//替换默认的:boxLabel:"彩色",name:"rdFilmColor"}]},{region:"center",xtype:"tabpanel",//注意大小写activeTab:0,id:"tplCenter",items:[{title:"first tabPanel",html:"first tabpanel here!!!"},{title:"second tabPanel",xtype:"grid",store:store,columns:[{header:"图片",dataIndex:"image",renderer:function(val){return "<img src='image/" + val + "'>";}},{id:"title",header:"标题",dataIndex:"title",renderer:function(val,x,curStore){return "<b>" + val + "</b><br/>" + curStore.get("tagline");}},{header:"导演",dataIndex:"director"},{header:"发布日期",dataIndex:"released",renderer:Ext.util.Format.dateRenderer("m/d/y")},{header:"喜剧类型",dataIndex:"genre"//,renderer:function(val){//return genreStore.queryBy(function(rec){//return rec.get("id") == val;//},this).itemAt(0).get("name");//}},{header:"说明",dataIndex:"tagline"},{id:"price",header:"价格",dataIndex:"price"}]},{title:"accordion",layout:"accordion",items:[{title:"director info",autoLoad:"./html/director.txt"},{title:"genre info",autoLoad:"./html/genre.txt"},{title:"name",autoLoad:"./html/name.txt"}]},{title:"嵌套布局",layout:'border',iconCls:'de',border:false,items:[{title:"",region:"north",html:"north",height:100,split:true},{title:"",region:"center",html:"center"}]}]},{region:"east",xtype:"panel",html:"东",id:"plEast",split:true,width:200},{region:"south",xtype:"panel",html:"南"}]});//查找元素var eastPanel = Ext.getCmp("myFirstViewport").findById("plEast");//console.debug(eastPanel.isVisible());if(!eastPanel.isVisible()){eastPanel.expand();}//取元素,动态增加组件var centerPanel = Ext.getCmp("myFirstViewport").findById("tplCenter");centerPanel.add({title:"test",html:"text"});});