ExtJS 2.0 實(shí)用簡明教程之布局概述
更新時(shí)間:2009年04月29日 14:36:17 作者:
所謂布局就是指容器組件中子元素的分布、排列組合方式。Ext的所有容器組件都支持而局操作,每一個(gè)容器都會有一個(gè)對應(yīng)的布局,布局負(fù)責(zé)管理容器組件中子元素的排列、組合及渲染方式等。
ExtJS的布局基類為Ext.layout.ContainerLayout,其它布局都是繼承該類。ExtJS的容器組件包含一個(gè)layout及l(fā)ayoutConfig配置屬性,這兩個(gè)屬性用來指定容器使用的布局及布局的詳細(xì)配置信息,如果沒有指定容器組件的layout則默認(rèn)會使用ContainerLayout作為布局,該布局只是簡單的把元素放到容器中,有的布局需要layoutConfig配置,有的則不需要layoutConfig配置??创a:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
width:400,
height:200,
layout:"column",
items:[{columnWidth:.5,
title:"面板1"},
{columnWidth:.5,
title:"面板2"}]
});
});
上面的代碼我們創(chuàng)建了一個(gè)面板Panel,Panle是一個(gè)容器組件,我們使用layout指定該面板使用Column布局。該面板的子元素是兩個(gè)面板,這兩個(gè)面板都包含了一個(gè)與列布局相關(guān)的配置參數(shù)屬性columnWidth,他們的值都是0.5,也就是每一個(gè)面板占一半的寬度。執(zhí)行上面的程序生成如下圖所示的結(jié)果:

Ext中的一些容器組件都已經(jīng)指定所使用的布局,比如TabPanel使用card布局、FormPanel使用form布局,GridPanel中的表格使用column布局等,我們在使用這些組件的時(shí)候,不能給這些容器組件再指定另外的布局。
ExtJS2.0一共包含十種布局,常用的布局有border、column、fit、form、card、tabel等布局,下面我們分別對這幾種布局作簡單的介紹。
復(fù)制代碼 代碼如下:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
width:400,
height:200,
layout:"column",
items:[{columnWidth:.5,
title:"面板1"},
{columnWidth:.5,
title:"面板2"}]
});
});
上面的代碼我們創(chuàng)建了一個(gè)面板Panel,Panle是一個(gè)容器組件,我們使用layout指定該面板使用Column布局。該面板的子元素是兩個(gè)面板,這兩個(gè)面板都包含了一個(gè)與列布局相關(guān)的配置參數(shù)屬性columnWidth,他們的值都是0.5,也就是每一個(gè)面板占一半的寬度。執(zhí)行上面的程序生成如下圖所示的結(jié)果:

Ext中的一些容器組件都已經(jīng)指定所使用的布局,比如TabPanel使用card布局、FormPanel使用form布局,GridPanel中的表格使用column布局等,我們在使用這些組件的時(shí)候,不能給這些容器組件再指定另外的布局。
ExtJS2.0一共包含十種布局,常用的布局有border、column、fit、form、card、tabel等布局,下面我們分別對這幾種布局作簡單的介紹。
相關(guān)文章
ext前臺接收action傳過來的json數(shù)據(jù)示例
這篇文章以示例的方式為大家介紹了ext前臺接收action傳過來的json數(shù)據(jù),需要的朋友可以參考下2014-06-06extjs中g(shù)rid中嵌入動態(tài)combobox的應(yīng)用
今天需要在grid中嵌入combobox,在網(wǎng)上找了好久也沒有找到一個(gè)正確可行的方法,可能是版本問題(我版本是extjs 3.0),沒有繼續(xù)研究其原因,自己查找資料,終于實(shí)現(xiàn)功能?,F(xiàn)在分享一下代碼。2011-01-01Extjs407 getValue()和getRawValue()區(qū)別介紹
mydate.getvalue() 返回的是對象;mydate.getRawValue() 返回的是該控件的顯示值,不知道的朋友可以參考下哈2013-05-05ExtJS Ext.MessageBox.alert()彈出對話框詳解
Ext.MessageBox是一個(gè)工具類,他繼承自O(shè)biect對象,用來生成各種風(fēng)格的信息提示對話框,Ext.Msg是該類的別名,使用Ext.MessageBox和用Ext.Msg效果是一樣的,而后者提供了更簡單的方式。2010-04-04常用Extjs工具:Extjs.util.Format使用方法
常用Extjs工具:Extjs.util.Format使用方法,需要的朋友可以參考下2012-03-03解決Extjs 4 Panel作為Window組件的子組件時(shí)出現(xiàn)雙重邊框問題
Extjs的Panel和Window等組件在默認(rèn)情況下是帶邊框的,通常情況下,單獨(dú)使用沒有什么關(guān)系,但是將Panel作為Window組件的子組件時(shí)就會出現(xiàn)雙重邊框的現(xiàn)象于是想辦法將兩重邊框去掉,變成單邊框,感興趣的朋友可以了解下2013-01-01extjs ColumnChart設(shè)置不同的顏色實(shí)現(xiàn)代碼
extjs為ColumnChart設(shè)置不同的顏色想必有很多朋友還是比較陌生的吧,接下來為大家詳細(xì)介紹下具體設(shè)置代碼,感興趣的朋友可以參考下哈2013-05-05Extjs優(yōu)化(一)刪除冗余代碼提高運(yùn)行速度
Extjs 本身是一個(gè)加載慢的JS框架,這次來寫寫怎么減少冗余代碼,也是提高運(yùn)行速度,感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04