学习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 EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
css样式标签和js语法属性区别
Nov 06 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
学习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原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
PHP7新特性
2021/03/09 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
js倒计时显示实例
2016/12/11 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
wxPython实现整点报时
2019/11/18 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
创业计划书的写作技巧及要点
2014/01/31 职场文书
出纳员岗位责任制
2014/02/11 职场文书
银行金融服务方案
2014/06/11 职场文书
学习党章的体会
2014/11/07 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python