FormPanel有两种布局:form和column,form是纵向布局,column为横向布局。默认为后者。使用layout属性定义布局类型。对于一个复杂的布局表单,最重要的是正确分割,分割结果直接决定布局能否顺利实现。 如果不再使用默认布局,那么我们必须为每一个元素指定一种布局方式,另外,还必须遵循以下几点:

【1】落实到任何一个表单组件后,最后总是form布局

【2】defaultType属性不一定起作用,必须显式为每一个表单组件指定xtype或new出新对象

【3】在column布局中,通过columnWidth可以指定列所占宽度的百分比,如占50%宽度为.5。

剖析出一个合理的结构,像下面这样 

我们发现,布局其实是由行和列组件成,分成由左往右和由上往下两个方向,由左往右 叫column,由上往下叫form。 
整个大的表单是form布局,从上往下放置了五个小布局,在这里我以行n标记,我们 以行1为例进行分析。行1从左往右有三个表单组件,所以是column布局,行1我们用结 构这样定义:

{  layout: “column”,  items:[{},{},{}] //items表示指定布局内的表单组件集合,在此有三个  }

行1内其实还有三个form布局,因为每个布局中只有一个表单组件,所以看起来并不 那么明显,我们完全可以放置多个表单组件到布局中。每一个布局使用下面的结构定义:

{  layout: “form”,  items:[{}] //只有一个表单组件  }

上面的两个结构最终要组装到一起:

{  layout: “column”,  items:[{     layout: “form”,     items:[{}]  },{     layout: “form”,     items: [{}]  },{     layout: “form”,     items: [{}]  }]  }

【以上文章转载自:http://hi.baidu.com/bactryki/item/1ad380288f2ec44c479962bf

另外还有一些在开发过程中遇到的问题:

【1】表单的label和表单组件不在同一行。

解决办法:FormPanel配置项加 labelAlign: "left", 

【2】表单按钮始终居右。

解决办法:FormPanel配置项加 buttonAlign: "left",

formpanel布局的学习的更多相关文章

  1. Extjs关于FormPanel布局

    Extjs关于FormPanel布局 FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局 ...

  2. CSS布局模型学习

    转自:http://www.cnblogs.com/erliang/p/4092192.html CSS布局模型学习   参考链接慕课网:HTML+CSS基础课程 知识基础 1. 样式 内联 嵌入 外 ...

  3. 再谈布局,栅栏式自适应布局的学习和实现(calc自适应布局)

    布局真的很重要.一个不好的布局后期会有很多很多的bug,就像是建房子的地基一样. 首先,再一次地圣杯布局的学习,来源于该教程: http://www.jianshu.com/p/f9bcddb0e8b ...

  4. CSS3伸缩布局Flex学习笔记

    如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些 ...

  5. ExtJs FormPanel布局

    FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局表单,最重要的是正确分割,分割结果直接 ...

  6. 在LinearLayout中实现列表,列表采用LinearLayout横向布局-android学习

    不多讲直接上代码 1.Activity 对应的布局文件如下: <?xml version="1.0" encoding="utf-8"?> < ...

  7. 2014第16周三CSS布局再学习摘录

    今天尝试写了下前端页面,费了不少时间,做出的结果仍然惨不忍睹,感觉很简单的几个页面,在现有框架多个样式混杂下就是感觉很不自在随意,晚上回来又看了些div+css方面的基础知识. 1.CSS的class ...

  8. Flex布局【弹性布局】学习

    先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以 ...

  9. Flex布局的学习经验

    做为css布局的又一种新方式,Flex拥有极强的使用效果,相比原来的float,position对元素样式的操作更加简洁,本文是我的一点学习经验和心得吧,如有错误以及不足之处,请多多指点. 好进入正题 ...

随机推荐

  1. poj(3080)

    题目链接:http://poj.org/problem?id=3080 学习博客:https://www.cnblogs.com/acjiumeng/p/6818213.html Blue Jeans ...

  2. 埃氏筛法(求n以内有多少个素数)

    题目大意:给定整数n,请问n以内有多少个素数 思路:想必要判断一个数是否是素数,大家都会了,并且可以在O(根号n)的复杂度求出答案,那么求n以内的素数呢,那样求就显得有点复杂了,下面看一下这里介绍的

  3. (转)Linux下PS1、PS2、PS3、PS4使用详解

    Linux下PS1.PS2.PS3.PS4使用详解 原文:http://www.linuxidc.com/Linux/2016-10/136597.htm 1.PS1——默认提示符 如下所示,可以通过 ...

  4. springboot相关的pom依赖文件

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  5. Response.Redirect 打开新窗口的两种方法

    一般情况下,Response.Redirect 方法是在服务器端进行转向,因此,除非使用 Response.Write("<script>window.location='htt ...

  6. android读写SD卡封装的类

    参考了网上的一些资源代码,FileUtils.java: package com.example.test; import java.io.BufferedInputStream; import ja ...

  7. usb-host一步一步学(一)安卓在usb-host模式下列出当前连接的usb设备

    在本次尝试中,我的安卓手机(HTC One X) 通过OTG线作为usb主机模式列出当前插入的usb设备,版本要求minSDKVersion="12". 没有外设的情况下,结果如下 ...

  8. centos6.2安装内核

    http://vault.centos.org/6.2/updates/Source/SPackages/ yum install rpm-build redhat-rpm-config unifde ...

  9. 杭电acm刷题顺序

    最近兴趣来了,闲暇之余,回顾大学期间刷过的杭电acm那些入门级别的题,以此巩固基础知识! 以下参考刷题顺序,避免入坑 原文传送门:https://blog.csdn.net/liuqiyao_01/a ...

  10. 修复SQL中的孤立账户

    EXEC sys.sp_change_users_login 'AUTO_FIX','登录名',NULL,'登录密码'