学习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控制日期显示的小例子
Nov 23 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
Node.js返回JSONP详解
May 18 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 Javascript
微信小程序实现星星评分效果
Nov 01 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
学习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 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
PHP中SESSION过期设置
2021/03/09 PHP
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
python批量导出导入MySQL用户的方法
2013/11/15 Python
Python实现115网盘自动下载的方法
2014/09/30 Python
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Python中Unittest框架的具体使用
2019/08/27 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
python实现按关键字筛选日志文件
2019/12/24 Python
python TCP包注入方式
2020/05/05 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
高级销售求职信
2014/02/21 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
房屋租赁协议书
2014/04/10 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
实践论读书笔记
2015/06/29 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
Mysql中mvcc各场景理解应用
2022/08/05 MySQL