学习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 相关文章推荐
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
js继承实现方法详解
Dec 16 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
深入理解Promise.all
Aug 08 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 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 magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
php array_map()函数实例用法
2021/03/03 PHP
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python让列表倒序输出的实例
2018/06/25 Python
django-allauth入门学习和使用详解
2019/07/03 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
python实现滑雪游戏
2020/02/22 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
什么是python的函数体
2020/06/19 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
装修致歉信
2014/01/15 职场文书
大二自我鉴定
2014/01/31 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
小学数学课题方案
2014/06/15 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
汉语拼音教学反思
2016/02/22 职场文书
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS