以下是自己扩展的FieldSet:
------------------------------
new ME.Base.FieldSet({
title: '基本信息',
autoHeight: true,
fieldSetItems: [{
xtype : 'textfield',
fieldLabel : "用户姓名",
name : 'USER_NAME'
}, {
xtype : 'textfield',
inputType : 'password',
fieldLabel : "用户密码",
name : 'PASSWORD'
}, {
xtype : 'textfield',
fieldLabel : "手机号码",
name : 'MOBILE'
}, {
xtype : 'textfield',
fieldLabel : "手机号码",
name : 'sss'
},{
xtype : 'textfield',
fieldLabel : "手机号码",
name : 'eee'
}]
--------------------------------
这样可以实现各个组件固定宽度,并随着Item个数的增长而自动延伸,保证整齐效果。
可是,展现的结果总是会出现边框,每一个组件外面包裹的那个容器都有边框,非常难看。
其实在列模式的每个容器配置项里加入
xtype: 'container',
autoEl: {},
即可:
ME.Base.FieldSet = Ext.extend(Ext.form.FieldSet, {
layout: 'column',
fieldSetItems: [],
autoScroll:false,
defaults: {
xtype: 'container',
autoEl: {},
layout: 'form',
labelAlign: 'right',
labelWidth: 65,
columnWidth: .25,
defaults: {
anchor: '96%'
}
},
initComponent: function(){
var thisItems = new Array();
var itemsLen = this.fieldSetItems.length;
if(itemsLen > 0){
for (var i = 0; i < itemsLen; i++){
thisItems[thisItems.length] = {
items: this.fieldSetItems[i]
}
}
}
this.items = thisItems;
ME.Base.FieldSet.superclass.initComponent.call(this);
}
});
分享到:
相关推荐
layout: 'column', // 使用column布局 border: false, // 不显示子元素的边框 items: [ { // 第一行第一列 columnWidth: .33, layout: 'form', border: false, items: [ new Ext.form.ComboBox({ // 创建...
- `Column`:列布局,子组件按列排列。 - `Border`:边框布局,复杂的布局结构,常用于主内容和侧边栏的展示。 - **Ext.container.Viewport**:全屏容器,用于包裹整个应用界面。 - **Ext.tab.Panel**:页签面板...
总结起来,这个表单布局实例展示了如何在ExtJS中使用`border`布局创建复杂的多区域界面,以及如何利用`FormPanel`和`column`布局来构建表单。通过组合这些布局技术,开发者可以创建出适应性强、易于使用的用户界面,...
5.2.8 Column列布局 5.2.9 Table表格布局 5.2.1 0Border边框布局 5.2.1 1Box盒布局 5.3 使用ViewPort 5.4 Ext.tab.Panel页签 5.5 本章小结 第6章 常用工具类与函数 6.1 非常有用的Ext.core.Element 6.2 ...
- **Column列布局**: 按列排列组件。 - **Fit布局**: 使子组件填充其父容器的全部空间。 - **Form布局**: 专为表单设计,自动调整字段的宽度。 - **Accordion布局**: 类似于手风琴,展开时隐藏其他项。 - **...
1. **布局类**:包括容器布局(Container Layout)、绝对定位布局(Absolute Layout)、手风琴布局(Accordion)、锚点布局(Anchor Layout)、边框布局(Border Layout)、卡片布局(Card Layout)、列布局(Column Layout)、...
6. **layout**:FieldSet 使用的布局类型,可以选择 `accordion`、`anchor`、`border`、`card`、`column`、`fit`、`form` 或 `table`。可以通过 `layoutConfig` 配置进一步定制布局参数。 7. **animCollapse**:...
9.4.12 列布局:ext.layout.container.column / 455 9.4.13 自适应布局:ext.layout.container.abstractfit与ext.layout.container.fit / 456 9.4.14 卡片布局:ext.layout.container.abstractcard与ext.layout....
- **配置驱动**:通过JSON或其他数据格式定义表单和grid的布局、字段、列等信息,实现配置文件驱动的动态生成。 - **响应式设计**:EXT4.3支持响应式布局,可以自适应不同设备和屏幕尺寸,确保动态表单和grid在...