学习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 相关文章推荐
javascript实现颜色渐变的方法
Oct 30 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
微信小程序request出现400的问题解决办法
May 23 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 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
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python语言的12个基础知识点小结
2014/07/10 Python
一些Python中的二维数组的操作方法
2015/05/02 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
django初始化数据库的实例
2018/05/27 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
python中 * 的用法详解
2019/07/10 Python
Python新手学习装饰器
2020/06/04 Python
Prototype是怎么扩展DOM的
2014/10/01 面试题
毕业生找工作推荐信
2013/11/21 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
幼儿园标语大全
2014/06/19 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
婚宴父亲致辞
2015/07/27 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
AJAX学习笔记
2021/05/18 Javascript
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP