学习ExtJS form布局
程序员文章站
2022-03-07 10:58:36
一、 form布局由类ext.layout.formlayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素...
一、 form布局由类ext.layout.formlayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用。
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"}
]
}
);
下一篇: 学习ExtJS(一) 之基础前提
推荐阅读
-
Flutter学习之构建、布局及绘制三部曲
-
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
-
Android布局管理器-从实例入手学习相对布局管理器的使用
-
Flutter学习笔记(23)--多个子元素的布局Widget(Rwo、Column、Stack、IndexedStack、Table、Wrap)
-
Android学习笔记之——UI组件/RelativeLayout(相对布局)
-
Bootstrap布局之栅格系统学习笔记
-
Java开发桌面程序学习(二)————fxml布局与控件学习
-
flex 布局学习
-
Angular实现form自动布局
-
三、WPF入门教程——布局和常用Panel学习