extjs布局（一)

標籤：style   blog   class   c   code   java   

Ext常用的布局都在Ext.layout下，這裡幾乎涵蓋了所有的布局方式，滿足開發人員需求。那麼我們就其中常用的方式逐一介紹。

Border布局

Border布局是Ext中常用布局方式（經常用到整個頁面的總體布局），感覺用的幾率很大。在看代碼之前先熟悉一種特殊的容器ViewPort，它是對於瀏覽器視窗的抽象，你可以將它理解為瀏覽器的可見地區，它將渲染到document.body並自動調整大小，一個頁面只能建立一個Viewport。

var pnNorth=new Ext.Panel({id:‘pnNorth‘,autoWidth:true,heigth:80,frame:true,region:‘north‘,html:‘這裡放置頁頭內容‘});var pnWest=new Ext.Panel({id:‘pnWest‘,title:‘功能表項目‘,width:200,heigth:‘auto‘,split:true,//顯示分隔條region:‘west‘,collapsible:true});var pnCenter=new Ext.TabPanel({region:‘center‘,activeTab:0,items:[{title:‘收件匣‘,authHeight:true,closable:true,//是否可關閉html:‘這裡顯示所收郵件。。。‘}]});var vp=new Ext.Viewport({layout:"border",items:[pnNorth,pnWest,pnCenter]});

 

Column布局

從字面就知道Column布局就是列布局，例如我一個panel中還有兩個子panel現在想要左側顯示一個右側顯示一個怎麼辦？這是可以選擇Column將父Panel分為兩列，左側一個右側一個。

var pnSub1=new Ext.Panel({height:300,columnWidth:.3,html:‘這是子panle1‘});var pnSub2=new Ext.Panel({height:300,columnWidth:.7,html:‘這是子panle2‘});var pn=new Ext.Panel({id:‘pn‘,title:‘父Panel‘,renderTo:‘divPanel‘,width:800,height:300,layout:‘column‘,items:[pnSub1,pnSub2]});

 

Fit布局

如果從複雜度來說fit布局應該算是最簡單的了，設定是最少的。Fit布局同樣也是設定父容器的layout屬性，但是子容器不用設定任何相應屬性。它的目的就是為了讓子容器能夠自適應於父容器（用了fit布局子容器設定寬度無效），但是請注意如果父容器有多個子容器，只會顯示第一個。

var pnSub1=new Ext.Panel({title:"子panel1",html:"子panel1（會顯示）"});var pnSub2=new Ext.Panel({title:"子panel2",html:"子panel2（不會顯示）"});var pn=new Ext.Panel({renderTo:"divPanel",title:"父panel",width:800,height:200,layout:"fit",items:[pnSub1,pnSub2]});

 

Table布局

Table布局多數用在較為複雜的情況下，想一想做web開發總不能就上面幾種簡單情況吧，因此也就是說Table布局還是很常用的。當然，但是和其他布局相比其參數設定也稍微一些（不用怕，事實上還是很少的）。

new Ext.Panel({title:"父Panel",renderTo:"divPanel",width:900,height:200,layout:"table",layoutConfig:{columns:3},defaults:{height:100,width:300},items:[{html:"第一個子panel(行：1,列：1)",rowspan:2,//合并行height:200},{html:"第二個子panel(行：1,列：2)",colspan:2,//合并列width:600},{html:"第三個子panel(行：2,列：1)"},{html:"第四個子panel(行：2,列：2)"}]});

 

Form布局

這個布局是專門為表單而設計的布局方式，當然多數是用在FormPanel中（它也是FormPanel預設的布局方式）。我們前面說過FormPanel但是沒有涉及複雜布局，事實實際應用中更多的是較複雜的布局。

new Ext.Panel({renderTo:"divPanel",title:"這個是Panel",width:300,height:120,bodyStyle:‘padding:10‘,layout:"form",hideLabels:false,labelAlighn:"right",defaultType:"textfield",items:[{fieldLabel:"姓名",name:"name"},{fieldLabel:"年齡",name:"age"}]});new Ext.FormPanel({renderTo:"divPane2",title:"這個是FormPanel",width:300,height:120,bodyStyle:‘padding:10‘,layout:"form",hideLabels:false,labelAlighn:"right",defaultType:"textfield",items:[{fieldLabel:"姓名",name:"name"},{fieldLabel:"年齡",name:"age"}]});

從代碼我們也可看出來，區別就是對於Panel我們配置了layout為form，從這也能看出來說FormPanel預設的布局就是form布局，所以對於習慣於用Panel而不習慣用FormPanel的朋友儘管用Panel,但是一定要考慮好提交的問題，如果使用panel的話，要做提交可是要一個個獲得控制項的值的，而FromPanel則不需要。

Ext.onReady(function(){var pnRow1=new Ext.Panel({border:false,layout:‘column‘,items:[new Ext.Panel({columnWidth:.5,layout:‘form‘,border:false,labelWidth:40,labelAlign:‘right‘,items:[{xtype:‘textfield‘,fieldLabel:‘姓名‘,name:‘uname‘,anchor:‘95%‘}]}),new Ext.Panel({columnWidth:.3,layout:‘form‘,border:false,labelWidth:40,labelAlign:‘right‘,items:[{xtype:‘radio‘,fieldLabel:‘性別‘,boxLabel:‘男‘,name:‘sex‘,inputValue:‘男‘,checked:true,anchor:"95%"}]}),new Ext.Panel({columnWidth:.2,layout:‘form‘,border:false,labelWidth:1,items:[{xtype:‘radio‘,boxLabel:‘女‘,name:‘sex‘,inputValue:‘女‘,labelSeparator:‘‘,anchor:"95%"}]})]});var pnRow2=new Ext.Panel({layout:‘column‘,border:false,items:[new Ext.Panel({columnWidth:.5,layout:‘form‘,border:false,labelWidth:40,labelAlign:‘right‘,items:[{xtype:‘datefield‘,name:‘birthday‘,fieldLabel:‘生日‘,anchor:‘95%‘}]}),new Ext.Panel({columnWidth:.5,layout:‘form‘,border:false,labelWidth:40,labelAlign:‘right‘,items:[{xtype:‘combo‘,name:‘study‘,store:[‘專科‘,‘本科‘,‘碩士‘,‘博士‘],fieldLabel:‘學曆‘,anchor:‘95%‘}]})]});var pnRow3=new Ext.Panel({layout:‘column‘,border:false,items:[new Ext.Panel({columnWidth:.3,layout:‘form‘,border:false,labelWidth:40,labelAlign:‘right‘,items:[{xtype:‘checkbox‘,name:‘hoby‘,inputValue:‘computer‘,fieldLabel:‘愛好‘,boxLabel:‘電腦‘,anchor:‘95%‘}]}),new Ext.Panel({columnWidth:.3,layout:‘form‘,border:false,labelWidth:1,labelAlign:‘right‘,items:[{xtype:‘checkbox‘,name:‘hoby‘,inputValue:‘football‘,boxLabel:‘足球‘,labelSeparator:‘‘,anchor:‘95%‘}]}),new Ext.Panel({columnWidth:.4,layout:‘form‘,border:false,labelWidth:1,labelAlign:‘right‘,items:[{xtype:‘checkbox‘,name:‘hoby‘,intputValue:‘tinyTable‘,boxLabel:‘乒乓球‘,labelSeparator:‘‘,anchor:‘95%‘}]})]});var pnRow4=new Ext.Panel({//當然這裡直接在FormPanel中添加TextField就可以了，因為只有一行，但是為了一致以及對齊方便我這裡還是放到了panel中layout:‘form‘,border:false,labelWidth:40,labelAlign:‘right‘,items:[{xtype:‘textfield‘,name:‘email‘,fieldLabel:‘住址‘,anchor:‘98%‘}]});var pnRow5=new Ext.Panel({layout:‘form‘,border:false,labelWidth:40,labelAlign:‘right‘,items:[{xtype:‘htmleditor‘,name:‘note‘,fieldLabel:‘備忘‘,height:200,anchor:‘98%‘}]});new Ext.FormPanel({renderTo:"divPanel",title:"個人資訊錄入",width:600,bodyStyle:‘padding:10px‘,layout:"form",items:[pnRow1,pnRow2,pnRow3,pnRow4,pnRow5]});});