ExtJs中column与form布局的再次领悟

前段时间转了一篇有关于ExtJs中column与form的布局问题(可以参考这篇文章http://sucre.blog.51cto.com/1084905/884279 )，今天在设计页面时又用到了这个布局，所以再次理解了一遍，将自己的心得与大家分享。

其实，这个布局是很简单的，先看一下大体的轮廓

var entinfos = {
xtype: 'fieldset',
baseCls:'x-fieldset',
autoHeight: true,
items: [{
layout:'column',
items:[{
border: false,
columnWidth: .33,
layout: 'form',
items: [{}]
},{
border: false,
columnWidth: .33,
layout: 'form',
items: [{}]
},{
border: false,
columnWidth: .33,
layout: 'form',
items: [{}]
}]
},{
layout:'column',
items:[{
columnWidth: .39,
border: false,
layout: 'form',
items: [receiver]
}]
},{
layout:'column',
items:[{}]
},{
layout:'column',
items:[{}]
},{
layout:'column',
items:[{}]
},{
layout:'column',
items:[{}]
},{
layout:'column',
items:[{}]
},{
layout:'column',
items:[{}]
},{
layout:'column',
items:[{}]
},{
layout:'column',
items:[{}]
}]
};

看到了吗？一个column中可以放一个form,也可以放多个form关键的地方是columnwidth的设置，column是指在这列中要放多少个form，列和列之间都是平行的，掌握了这一点就好理解了。

转载于:https://blog.51cto.com/sucre/971121

ExtJs中column与form布局的再次领悟相关推荐

ExtJS中layout的12种布局风格
总览 extjs的容器组件都可以设置它的显示风格,它的有效值有 1. absolute,2. accordion, 3. anchor, 4. border, 5. card, 6. column, ...
extjs 提交表单给php,JavaScript_Extjs学习笔记之二初识Extjs之Form，Extjs中的表单组件是Ext.form.Basic - phpStudy...
Extjs学习笔记之二初识Extjs之Form Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一 ...
extjs中bind_Extjs中常用表单介绍与应用
目标: 知道表单面板如何创建了解表单面板中xtype的类型的应用知道表单面板如何验证,绑定,取值综合应用表单面板(玩转它) 内容: 首先我们要理解的是FormPanel也是继承panel组件的. ...
第六课,Extjs中常用表单介绍与应用
目标: 知道表单面板如何创建了解表单面板中xtype的类型的应用知道表单面板如何验证,绑定,取值综合应用表单面板(玩转它) 内容: 首先我们要理解的是FormPanel也是继承panel组件的. ...
[转]ExtJs中使用中碰到的三个问题的解决方法
这里的经验不是指对这种框架总体上面的一些介绍,只是记录了本月中使用ExtJs中遇到的3个问题的解决方法,这里还是要感谢Extjs论坛的 Animal和Condor,每次在我遇到拦路虎的时候,总能在他俩 ...
解决Extjs中Combobox显示值和真实值赋值问题
用过Extjs的朋友相信都知道在Extjs的Combobox组件中是由两个值来组成的.一个是displayField这个是用来显示给我们看的,而另一个是真正给系统用的valueField,举个例子会 ...
ExtJS中如何根据combobox的选值，动态地决定组件的显隐？
來源:http://www.javaeye.com/problems/3168 ExtJS所做的Form,需要根据combobox选择值,来决定后面所显示的组件.办法是动态地加在FormPanel中的 ...
Extjs中三种不同的数据提交方式
Extjs中三种不同的数据提交方式 Extjs的三种提交方式: 表单Ajax提交,普通提交,单独Ajax提交: 1.表单ajax提交(默认提交方式) 提交函数:当按下表单中的提交按钮时执行下面的btn ...
ExtJS2.0实用简明教程 - Form布局
Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用. 看下面的 ...

ExtJs中column与form布局的再次领悟

ExtJs中column与form布局的再次领悟相关推荐

最新文章

热门文章