学习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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 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获取MySql新增记录ID值的3种方法
2014/06/24 PHP
php设计模式之单例模式代码
2016/06/11 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
可以将word转成html的js代码
2010/04/11 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
linecache模块加载和缓存文件内容详解
2018/01/11 Python
python Celery定时任务的示例
2018/03/13 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
简单介绍python封装的基本知识
2019/08/10 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
优秀校长事迹材料
2014/12/24 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
情况说明书格式及范文
2019/06/24 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
python Django框架快速入门教程(后台管理)
2021/07/21 Python