學(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)文章
extjs 列表框(multiselect)的動(dòng)態(tài)添加列表項(xiàng)的方法
最近公司一個(gè)項(xiàng)目,因?yàn)橐褂胐iv模擬的窗口,因?yàn)榫寐別xtjs的大名,因此就想在項(xiàng)目中使用一下.首先下載了multiselect的extjs3.0 demo.看到的代碼這里我就不粘貼了.2009-07-07
ExtJS 2.0實(shí)用簡(jiǎn)明教程 之Ext類庫(kù)簡(jiǎn)介
ExtJS由一系列的類庫(kù)組成，一旦頁(yè)面成功加載了ExtJS庫(kù)后，我們就可以在頁(yè)面中通過(guò)javascript調(diào)用ExtJS的類及控件來(lái)實(shí)現(xiàn)需要的功能。2009-04-04
Extjs學(xué)習(xí)筆記之一 初識(shí)Extjs之MessageBox
去官網(wǎng)下載好extjs的壓縮包，解壓縮之后得到如下目錄結(jié)構(gòu)。2010-01-01
面版表示頁(yè)面上的一塊相對(duì)獨(dú)立的區(qū)域，利用傳統(tǒng)的html+css要構(gòu)建靈活統(tǒng)一的區(qū)域并非易事。2010-01-01
Extjs 繼承Ext.data.Store不起作用原因分析及解決
有關(guān)Extjs 繼承Ext.data.Store 不起作用的原因有很多種，接下來(lái)與大家分享下，本人遇到的，這個(gè)Store寫出來(lái)之后 是不會(huì)起到作用的，感興趣的朋友可以看下詳細(xì)的原因及解決方法2013-04-04
在Ext的使用過(guò)程中，一不留心就出現(xiàn)了亂碼，包括在客戶端提交給服務(wù)器的數(shù)據(jù)中出現(xiàn)了亂碼和服務(wù)器端返回給客戶端的數(shù)據(jù)中出現(xiàn)了亂碼，下面簡(jiǎn)單分析一下出現(xiàn)亂碼的原因。2009-04-04
Ext.util.Observable有一個(gè)重要的功能，可以為某個(gè)事件設(shè)置攔截器，統(tǒng)一管理方法的處罰。使用capture()和releaseCapture()來(lái)實(shí)現(xiàn)這個(gè)功能。2010-01-01
Extjs組件的定義在網(wǎng)上看到了一個(gè)實(shí)例，于是拷了下來(lái)留著以后用，現(xiàn)在把它曬出來(lái)與大家一起分享，感興趣的各位可不要錯(cuò)過(guò)了哈2013-06-06
extjs grid設(shè)置某列背景顏色和字體顏色的實(shí)現(xiàn)方法
extjs grid設(shè)置某列背景顏色和字體顏色的實(shí)現(xiàn)步驟，需要的朋友可以參考下。2010-09-09
本文介紹在桌面程序開發(fā)中很常用也很簡(jiǎn)單的工具欄和菜單，但是在通常的web開發(fā)中，要實(shí)現(xiàn)好工具欄和菜單并非易事，然而extjs使我們能夠用類似桌面程序開發(fā)的方法來(lái)開發(fā)web的工具欄和菜單。2010-01-01