学习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 相关文章推荐
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
js获取图片的base64编码并压缩
Dec 05 Javascript
token 机制和实现方式
Dec 15 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实现简单洗牌算法
2013/06/18 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
速记Python布尔值
2017/11/09 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
如何使用python写截屏小工具
2020/09/29 Python
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
护理学毕业生求职信
2013/11/14 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
团队口号大全
2014/06/06 职场文书
财会专业大学生求职信
2014/09/26 职场文书
继承公证书格式
2015/01/26 职场文书
跑吧孩子观后感
2015/06/10 职场文书
入队仪式主持词
2015/07/04 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
话题作文之学会尊重
2019/12/16 职场文书
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫