学习ExtJS form布局


Posted in Javascript onOctober 08, 2009

一、 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"} 
] 
} 
);
Javascript 相关文章推荐
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
JS简单随机数生成方法
Sep 05 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
vue的for循环使用方法
Feb 12 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
学习ExtJS fit布局使用说明
Oct 08 #Javascript
学习ExtJS border布局
Oct 08 #Javascript
学习ExtJS Column布局
Oct 08 #Javascript
学习ExtJS 访问容器对象
Oct 07 #Javascript
学习ExtJS Window常用方法
Oct 07 #Javascript
学习ExtJS Panel常用方法
Oct 07 #Javascript
学习ExtJS TextField常用方法
Oct 07 #Javascript
You might like
php 高性能书写
2010/12/11 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python iter()函数用法实例分析
2018/03/17 Python
对Python信号处理模块signal详解
2019/01/09 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
销售2014年度工作总结
2014/12/08 职场文书
离职证明格式样本
2015/06/12 职场文书
个人催款函范文
2015/06/24 职场文书
详解Java实践之适配器模式
2021/06/18 Java/Android