学习ExtJS form布局
作者:bea
一、 Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用。 hideLabels:tru表示隐藏标签,默认为false。 labelAlign:标签队齐方式left、right、center,默认为left。 代码如下: Ext.onReady(function(){ var _panel = new Ext.Panel({ title:"人员信
一、 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"}
]
}
);
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- jquery select选中的一个小问题
- Jquery 表单取值赋值的一些基本操作
- jquery 框架使用教程 AJAX篇
- javascript createElement()创建input不能设置name属性的解决方法
- jQuery live( type, fn ) 委派事件实现
- 修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
- JS模拟的QQ面板上的多级可展开的菜单
- JavaScript 另类遍历数组实现代码
- js css样式操作代码(批量操作)
- javascript Range对象跨浏览器常用操作
- 防止动态加载JavaScript引起的内存泄漏问题
- JavaScript delete 属性的使用
- 有效的捕获JavaScript焦点的方法小结
- Javascript isArray 数组类型检测函数
- JavaScript 监听textarea中按键事件
- jquery 最简单的属性菜单
- Javascript 日期处理之时区问题
- 学习ExtJS table布局
- 学习ExtJS accordion布局