学习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 自动安装exe程序
Nov 30 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
element tree树形组件回显数据问题解决
Aug 14 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
smarty半小时快速上手入门教程
2014/10/27 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
js 编程笔记 无名函数
2011/06/28 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
微信JS接口大全
2016/08/25 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
Python中获取网页状态码的两个方法
2014/11/03 Python
深入理解Python3中的http.client模块
2017/03/29 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
Python socket聊天脚本代码实例
2020/01/02 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
如何执行一个shell程序
2012/11/23 面试题
个人求职简历的自我评价范文
2013/10/09 职场文书
测绘工程专业个人自我评价
2013/12/01 职场文书
入团者的自我评价分享
2013/12/02 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
优秀会计求职信
2014/07/04 职场文书
2014年村官工作总结
2014/11/24 职场文书
优秀团员个人总结
2015/02/26 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
征求意见函
2015/06/05 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
介绍信应该怎么开?
2019/04/03 职场文书