学习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 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
了解一点js的Eval函数
Jul 26 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
javascript实现切换td中的值
Dec 05 Javascript
js使用心得分享
Jan 13 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
详解各版本React路由的跳转的方法
May 10 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一些公用函数的集合
2008/03/27 PHP
php mail to 配置详解
2014/01/16 PHP
php去掉文件前几行的方法
2015/07/29 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
关于js遍历表格的实例
2013/07/10 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
js实现登录验证码
2016/12/22 Javascript
javascript基础知识讲解
2017/01/11 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
详解python进行mp3格式判断
2016/12/23 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
对python判断是否回文数的实例详解
2019/02/08 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
正隆泰信息技术有限公司上机题
2012/06/14 面试题
机械系毕业生求职信
2014/05/28 职场文书
职工小家建设活动方案
2014/08/25 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书