学习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 相关文章推荐
让IE6支持min-width和max-width的方法
Jun 25 Javascript
javascript 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 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
SONY SRF-M100的电路分析
2021/03/02 无线电
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
javascript自执行函数
2017/02/10 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
[原创]pip和pygal的安装实例教程
2017/12/07 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
3种python调用其他脚本的方法
2020/01/06 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
Python如何获取文件指定行的内容
2020/05/27 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
护士个人自我鉴定
2014/03/24 职场文书
项目合作协议书
2014/04/16 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
升职自荐信怎么写
2015/03/05 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书