学习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 相关文章推荐
jquery 事件对象属性小结
Apr 27 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
原生js生成图片验证码
Oct 11 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 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生成缩略图的代码
2011/01/12 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
php扩展开发入门demo示例
2019/09/23 PHP
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
jquery attr 设定src中含有&(宏)符号问题的解决方法
2011/07/26 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
浅谈js中的bind
2019/03/18 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
python实现文件快照加密保护的方法
2015/06/30 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
用Python 执行cmd命令
2020/12/18 Python
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
文员自我评价怎么写
2013/09/19 职场文书
销售部主管岗位职责
2013/12/18 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
深入理解go slice结构
2021/09/15 Golang