學(xué)習(xí)ExtJS form布局
更新時(shí)間：2009年10月08日 00:03:52 作者：
ExtJS form布局使用說(shuō)明，需要的朋友可以參考下。
一、 Form布局由類Ext.layout.FormLayout定義，名稱為form，是一種專門用于管理表單中輸入字段的布局，這種布局主要用于在程序中創(chuàng)建表單字段或表單元素等使用。
hideLabels：tru表示隱藏標(biāo)簽，默認(rèn)為false。
labelAlign：標(biāo)簽隊(duì)齊方式left、right、center,默認(rèn)為left。
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"人員信息",
renderTo:Ext.getBody(),
frame:true,
width:500,
height:300,
layout:"form",
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"姓名",name:"name"},
{fieldLabel:"請(qǐng)輸入地址",name:"address"},
{fieldLabel:"請(qǐng)輸入電話",name:"tel"}
]
}
);
二、在實(shí)際應(yīng)用中，Ext.form.FormPanel這個(gè)類默認(rèn)布局使用的是Form布局，因此我們直接使用FormPanel即可。上面的例子可改寫成如下的形式：
Ext.onReady(function(){
var _panel = new Ext.FormPanel({
title:"人員信息",
renderTo:Ext.getBody(),
frame:true,
width:500,
height:300,
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"姓名",name:"name"},
{fieldLabel:"請(qǐng)輸入地址",name:"address"},
{fieldLabel:"請(qǐng)輸入電話",name:"tel"}
]
}
);
hideLabels：tru表示隱藏標(biāo)簽，默認(rèn)為false。
labelAlign：標(biāo)簽隊(duì)齊方式left、right、center,默認(rèn)為left。
復(fù)制代碼 代碼如下:
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"人員信息",
renderTo:Ext.getBody(),
frame:true,
width:500,
height:300,
layout:"form",
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"姓名",name:"name"},
{fieldLabel:"請(qǐng)輸入地址",name:"address"},
{fieldLabel:"請(qǐng)輸入電話",name:"tel"}
]
}
);
二、在實(shí)際應(yīng)用中，Ext.form.FormPanel這個(gè)類默認(rèn)布局使用的是Form布局，因此我們直接使用FormPanel即可。上面的例子可改寫成如下的形式：
復(fù)制代碼 代碼如下:
Ext.onReady(function(){
var _panel = new Ext.FormPanel({
title:"人員信息",
renderTo:Ext.getBody(),
frame:true,
width:500,
height:300,
hideLabels:false,
labelAlign:"right",
height:120,
defaultType: 'textfield',
items:[
{fieldLabel:"姓名",name:"name"},
{fieldLabel:"請(qǐng)輸入地址",name:"address"},
{fieldLabel:"請(qǐng)輸入電話",name:"tel"}
]
}
);
相關(guān)文章
其實(shí)這一個(gè)總是很容易解決，只要在Ext.onReady()方法之前（或者方法的第一句）加上下面這一句代碼就解決了！2010-12-12
ExtJs 學(xué)習(xí)筆記基礎(chǔ)篇 Ext組件的使用
昨天剛接觸到Extjs，簡(jiǎn)單寫了篇學(xué)習(xí)筆記，今天繼續(xù)。2008-12-12
ExtJS4 組件化編程，動(dòng)態(tài)加載，面向?qū)ο?，Direct
ExtJS4終于出了正式版，體驗(yàn)一下面官方推薦的向?qū)ο缶幊套罴褜?shí)踐 過(guò)去的做法是new對(duì)象或者Ext.create一個(gè)對(duì)象，每個(gè)對(duì)象都要先實(shí)例化才能使用2011-05-05
Ext.util.Observable有一個(gè)重要的功能，可以為某個(gè)事件設(shè)置攔截器，統(tǒng)一管理方法的處罰。使用capture()和releaseCapture()來(lái)實(shí)現(xiàn)這個(gè)功能。2010-01-01
ExtJs 3.1 XmlTreeLoader Example Error
ExtJs 3.1的XmlTreeLoader例子折騰了我近一個(gè)下午加晚上，官方的例子沒(méi)有問(wèn)題，可以加載xml的數(shù)據(jù)，本地IIS死活不行2010-02-02
ExtJS accordion布局使用說(shuō)明，需要的朋友可以參考下。2009-10-10
學(xué)習(xí)ExtJS（一） 之基礎(chǔ)前提
學(xué)習(xí)ExtJS前提條件，大家要想學(xué)習(xí)，需要一些基礎(chǔ)知識(shí)。2009-10-10
Extjs中ComboBoxTree實(shí)現(xiàn)的下拉框樹效果(自寫)
最近涉及到的一個(gè)項(xiàng)目中，需要實(shí)現(xiàn)ComboBoxTree的效果，由于在Extjs中是沒(méi)有這種效果，所以看看別人的資料自己寫了一個(gè)，感興趣的朋友可以參考下哈2013-05-05
ExtJS 中Window的窗口最大化只需將maximizable屬性設(shè)置為true即可，點(diǎn)擊最大化按鈕就可以將窗體最大化，最小化的操作類似將minimizable設(shè)置為true，即可以看到窗體的最小化按鈕，但是點(diǎn)擊此按鈕并不會(huì)出發(fā)任何操作，Ext沒(méi)有為窗口預(yù)設(shè)最小化的任何操作，需要自己自定義最小化功能。2009-11-11
Extjs4.0 ComboBox如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)
Extjs4.0 ComboBox如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)，許多網(wǎng)友都很好奇這個(gè)問(wèn)題，明確的一點(diǎn)是在extjs4.0中要使用load來(lái)獲取數(shù)據(jù)，到底如何實(shí)現(xiàn)，下面小編為大家分享具體步驟2016-05-05