Extjs关于FormPanel布局
Extjs关于FormPanel布局
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: [{}]
}]
}
实现上面的完整代码是:
Ext.onReady(function() {
var form = new Ext.form.FormPanel({
title : "灵活布局的表单",
width : 650,
autoHeight : true,
frame : true,
renderTo : "a",
layout : "form", // 整个大的表单是form布局
labelWidth : 65,
labelAlign : "right",
items : [{ // 行1
layout : "column", // 从左往右的布局
items : [{
columnWidth : .3, // 该列有整行中所占百分比
layout : "form", // 从上往下的布局
items : [{
xtype : "textfield",
fieldLabel : "姓",
width : 120
}]
}, {
columnWidth : .3,
layout : "form",
items : [{
xtype : "textfield",
fieldLabel : "名",
width : 120
}]
}, {
columnWidth : .3,
layout : "form",
items : [{
xtype : "textfield",
fieldLabel : "英文名",
width : 120
}]
}]
}, { // 行2
layout : "column",
items : [{
columnWidth : .5,
layout : "form",
items : [{
xtype : "textfield",
fieldLabel : "座右铭1",
width : 220
}]
}, {
columnWidth : .5,
layout : "form",
items : [{
xtype : "textfield",
fieldLabel : "座右铭2",
width : 220
}]
}]
}, {// 行3
layout : "form",
items : [{
xtype : "textfield",
fieldLabel : "奖励",
width : 500
}, {
xtype : "textfield",
fieldLabel : "处罚",
width : 500
}]
}, {// 行4
layout : "column",
items : [{
layout : "form",
columnWidth : 0.2,
items : [{
xtype : "textfield",
fieldLabel : "电影最爱",
width : 50
}]
}, {
layout : "form",
columnWidth : 0.2,
items : [{
xtype : "textfield",
fieldLabel : "音乐最爱",
width : 50
}]
}, {
layout : "form",
columnWidth : 0.2,
items : [{
xtype : "textfield",
fieldLabel : "明星最爱",
width : 50
}]
}, {
layout : "form",
columnWidth : 0.2,
items : [{
xtype : "textfield",
fieldLabel : "运动最爱",
width : 50
}]
}]
}, {// 行5
layout : "form",
items : [{
xtype : "htmleditor",
fieldLabel : "获奖文章",
enableLists : false,
enableSourceEdit : false,
height : 150
}]
}],
buttonAlign : "center",
buttons : [{
text : "提交"
}, {
text : "重置"
}]
});
});
Extjs关于FormPanel布局的更多相关文章
- 【ExtJS】FormPanel 布局(二)
周末2天好好学习了下布局,现在都给实现了吧. 5.border布局: Border布局将容器分为五个区域:north.south.east.west和center.除了center区域外,其他区域都需 ...
- 【ExtJS】FormPanel 布局(一)
准备工作,布置一个最简单的Form,共5个组件,都为textfield. Ext.onReady(function(){ Ext.create('Ext.form.Panel', { width: 5 ...
- 【ExtJS】简单布局应用
前几天学习了ExtJS的各种布局后,以下就是各种实践,从简单做起. 实现目的: 一个提交表单页,一个显示信息页,表单为个人基本资料输入,显示页为基本信息展示. 内容: 总体布局为border布局,展示 ...
- ExtJs FormPanel布局
FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局表单,最重要的是正确分割,分割结果直接 ...
- Extjs面板和布局初探
面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上.ExtJS通过提供多种布局类来 ...
- 【ExtJS】 FormPanel与ComboBox的集成以及值的获取
var formPanel = Ext.create("Ext.form.Panel",{ title : 'formPanel', width : 400, url : 'asd ...
- 学习ExtJS的grid布局
这是之前学习ExtJS布局的时候我导师让我重点熟悉的内容.之后会发一个最近写的结合MVC项目的grid布局的案例. 上一篇关于ExtJS的学习资料什么的都已经更在上一篇了,这里只是对一些代码的记录. ...
- 【ExtJS】FormPanel表单验证
在Extjs中,FormPane表单提供了各种各样的验证. 在表单验证前需要在onReady的function({})内添加以下代码: Ext.QuickTips.init(); //为组件提供 ...
- formpanel布局的学习
FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局表单,最重要的是正确分割,分割结果直接 ...
随机推荐
- 运行第一个Node.js程序
初学Node.js,萌新一枚.感觉Node.js挺不错的,从基础开始一步一步来,加油吧! 我们来使用Node.js的express来运行第一个程序helloworld: 在命令提示符键入express ...
- JQuery处理json与ajax返回JSON实例
一.JSON的一些基础知识. JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). “[]”,标识数组,数组内 ...
- C#中的 具名参数 和 可选参数
具名参数 和 可选参数 是 C# framework 4.0 出来的新特性. 一. 常规方法定义及调用 public void Demo1(string x, int y) { //do someth ...
- UI1_ScrollViewHomeWork
// // AppDelegate.m // UI1_ScrollViewHomeWork // // Created by zhangxueming on 15/7/13. // Copyright ...
- springmvc 精华
Spring Mvc简介: Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求 ...
- Install GDAL in OpenSUSE 12.3 Linux
Runtime Enviroment:Open SUSE Linux *i385 Notice:if any command disavliable ,you can copy the paramet ...
- hadoop2.2.0伪分布式搭建
1.准备Linux环境 1.0点击VMware快捷方式,右键打开文件所在位置 -> 双击vmnetcfg.exe -> VMnet1 host-only ->修改subnet ...
- 用jQuery解析复杂的xml结构文件
一个晚上的心血 <?xml version="1.0" encoding="UTF-8"?> <weibo><wbContent& ...
- 转:Apache与Nginx的优缺点比较
Apache与Nginx的优缺点比较 http://weilei0528.blog.163.com/blog/static/206807046201321810834431/ 1.nginx相对于ap ...
- Eclipse 代码提示功能设置。
1. 解决实例化时自动补全不必要的单词问题 2. 以MyEclipse 6.5重新配图 鉴 于网上的批评之声甚大,我只想说明我的想法:这样的增强代码提示,最终是用来辅助我们 ...