Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用。

   看下面的代码:
Ext.onReady(function(){ 

new Ext.Panel({

renderTo:"hello",

title:"容器组件",

width:300,

layout:"form",

hideLabels:false,

labelAlign:"right",

height:120,

defaultType: 'textfield',

items:[

{fieldLabel:"请输入姓名",name:"name"},

{fieldLabel:"请输入地址",name:"address"},

{fieldLabel:"请输入电话",name:"tel"}

]

}

);

});

上面的代码创建了一个面板,面板使用Form布局,面板中包含三个子元素,这些子元素都是文本框字段,在父容器中还通过hideLabels、labelAlign等配置属性来定义了是否隐藏标签、标签对齐方式等。上面代码的输出结果如下图所示:

可以在容器组件中把hideLabels设置为true,这样将不会显示容器中字段的标签了,如下图所示:

在实际应用中,Ext.form.FormPanel这个类默认布局使用的是Form布局,而且FormPanel还会创建与 <form> 标签相关的组件,因此一般情况下我们直接使用FormPanel即可。上面的例子可改写成如下的形式:

Ext.onReady(function(){ 

new Ext.form.FormPanel({

renderTo:"hello",

title:"容器组件",

width:300, 

labelAlign:"right",

height:120,

defaultType: 'textfield',

items:[

{fieldLabel:"请输入姓名",name:"name"},

{fieldLabel:"请输入地址",name:"address"},

{fieldLabel:"请输入电话",name:"tel"}

]

}

);

});

程序结果与前面使用Ext.Panel并指定form布局的一样,如下图所示:

ExtJS2.0实用简明教程 - Form布局的更多相关文章

  1. 2013 duilib入门简明教程 -- 界面布局(9)

        上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的位置会跟着变化,这是因为我们将按钮放到了HorizontalLayout.VerticalLayou ...

  2. duilib入门简明教程 -- 界面布局(9)

        上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的位置会跟着变化,这是因为我们将按钮放到了HorizontalLayout.VerticalLayou ...

  3. duilib入门简明教程 -- 界面布局(9) (转)

    原文转自:http://www.cnblogs.com/Alberl/p/3343806.html     上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的 ...

  4. 2013 duilib入门简明教程 -- 总结 (20)

        duilib的入门系列就到尾声了,再次提醒下,Alberl用的duilib版本是SVN上第个版本,时间是2013.08.15~       这里给出Alberl最后汇总的一个工程,戳我下载,效 ...

  5. DUILIB入门简明教程

      电子书下载: DUILIB入门简明教程.chm 文章作者:  Alberl 电子书制作: 邓学彬 目录: 2013 duilib入门简明教程 -- 前言(1) 2013 duilib入门简明教程 ...

  6. 转载乙醇大师的appium简明教程

    appium简明教程(11)——使用resource id定位(仅支持安卓4.3以上系统) 乙醇 2014-06-28 21:01 阅读:16406 评论:21 appium简明教程(10)——控件定 ...

  7. ExtJs2.0里Ext.form.Radio水平排列布局

      ExtJs2.0好像不支持单选框组,因此用两个name相同单选框来实现单选框组 var radio1 = new Ext.form.Radio({boxLabel:'男',name:'sex',i ...

  8. HTML简明教程(二)

    HTML简明教程(二) 一.HTML 图像 二.HTML 表格 三.HTML 列表 四.HTML div和 span 五.HTML 布局 六.HTML 表单和输入 七.HTML 框架 八.HTML内联 ...

  9. Lisp简明教程

    此教程是我花了一点时间和功夫整理出来的,希望能够帮到喜欢Lisp(Common Lisp)的朋友们.本人排版很烂还望多多海涵! <Lisp简明教程>PDF格式下载 <Lisp简明教程 ...

随机推荐

  1. WinForm中DataGridView复制选中单元格内容解决方案

    WinForm中DataGridView鼠标选中单元格内容复制方案 1.CTR+C快捷键复制 前提:该控件ClipboardCopyMode属性设置值非Disable: 2.鼠标框选,自定义代码实现复 ...

  2. Redis 笔记(六)—— ZSET 常用命令

    常用命令 命令 用例和描述 ZADD ZADD key-name score member [score member ...] —— 将带有分值的成员添加到 HSET 中 ZREM ZREM key ...

  3. Maven快照版本要这样用才真的香!

    Bug的身世之谜 今天又分享一个问题解决的故事.请看下图框起来的错误,明显就是找不到这个class嘛! 下面我们按照正常人的思路去排查这个问题,既然找不到class那就先看这个依赖的jar包有没有,如 ...

  4. docker中使用mysql数据库详解(在局域网访问)

    开发过程中经常需要安装.调试mysql数据库,还需要在各种操作系上安装包依赖,实在是繁琐,因此就研究了一下如何在docker上运行一个mysql镜像,省却了我安装.找依赖的问题. 注:本文所有内容均在 ...

  5. Evolution of Image Classifiers,进化算法在神经网络结构搜索的首次尝试 | ICML 2017

    论文提出使用进化算法来进行神经网络结构搜索,整体搜索逻辑十分简单,结合权重继承,搜索速度很快,从实验结果来看,搜索的网络准确率挺不错的.由于论文是个比较早期的想法,所以可以有很大的改进空间,后面的很大 ...

  6. 2016蓝桥杯报纸页数(C++C组)

    题目: 报纸页数X星球日报和我们地球的城市早报是一样的,都是一些单独的纸张叠在一起而已.每张纸印有4版.比如,某张报纸包含的4页是:5,6,11,12,可以确定它应该是最上边的第2张报纸.我们在太空中 ...

  7. 浅谈ArrayList

    浅谈ArrayList 废话不多说(事实是不会说),让我们直接进入正题 首先讲一讲最基本的ArrayList的初始化,也就是我们常说的构造函数,ArrayList给我们提供了三种构造方式,我们逐个来查 ...

  8. AJ学IOS 之二维码学习,快速生成二维码

    AJ分享,必须精品 二维码是一项项目中可能会用到的,iOS打开相机索取二维码的速度可不是Android能比的...(Android扫描二维码要来回来回晃...) 简单不多说,如何把一段资料(网址呀,字 ...

  9. 怎么搭建python环境?很简单,就几步的事

    现在学习python的人越来越多了,而学习python必备的就是搭建python环境,那么,到底怎么搭建python环境呢? 首先,你需要有安装包,这个去官网下载就可以了,如果不会的话,可以看文章底部 ...

  10. Nikto使用方法

    Introduction Nikto是一款开源的(GPL)网站服务器扫描器,使用Perl基于LibWhisker开发.它可以对网站服务器进行全面的多种扫描,包括6400多个潜在危险的文件/CGI,检查 ...