学习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 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 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
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
js实现一个简易计算器
2020/03/30 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
Python 如何对文件目录操作
2020/07/10 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
机械专业应届生求职信
2013/09/21 职场文书
物业管理专业个人的自我评价
2013/11/19 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
工作决心书
2014/03/11 职场文书
黄金酒广告词
2014/03/21 职场文书
身边的榜样活动方案
2014/08/20 职场文书
迟到检讨书
2015/01/26 职场文书
建筑工程催款函
2015/06/24 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
Python List remove()实例用法详解
2021/08/02 Python
python前后端自定义分页器
2022/04/13 Python