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