學習ExtJS form布局
更新時間:2009年10月08日 00:03:52 作者:
ExtJS form布局使用說明,需要的朋友可以參考下。
一、 Form布局由類Ext.layout.FormLayout定義,名稱為form,是一種專門用于管理表單中輸入字段的布局,這種布局主要用于在程序中創(chuàng)建表單字段或表單元素等使用。
hideLabels:tru表示隱藏標簽,默認為false。
labelAlign:標簽隊齊方式left、right、center,默認為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"}
]
}
);
二、在實際應用中,Ext.form.FormPanel這個類默認布局使用的是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表示隱藏標簽,默認為false。
labelAlign:標簽隊齊方式left、right、center,默認為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"}
]
}
);
二、在實際應用中,Ext.form.FormPanel這個類默認布局使用的是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"}
]
}
);
相關文章
ExtJS4 組件化編程,動態(tài)加載,面向對象,Direct
ExtJS4終于出了正式版,體驗一下面官方推薦的向對象編程最佳實踐 過去的做法是new對象或者Ext.create一個對象,每個對象都要先實例化才能使用2011-05-05ExtJs 3.1 XmlTreeLoader Example Error
ExtJs 3.1的XmlTreeLoader例子折騰了我近一個下午加晚上,官方的例子沒有問題,可以加載xml的數(shù)據(jù),本地IIS死活不行2010-02-02Extjs中ComboBoxTree實現(xiàn)的下拉框樹效果(自寫)
最近涉及到的一個項目中,需要實現(xiàn)ComboBoxTree的效果,由于在Extjs中是沒有這種效果,所以看看別人的資料自己寫了一個,感興趣的朋友可以參考下哈2013-05-05Extjs4.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