`
qinya06
  • 浏览: 600523 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

ExtJS的FieldSet的column列布局

阅读更多
以下是自己扩展的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); 
} 
}); 




分享到:
评论

相关推荐

    Extjs fieldset两行两列布局

    layout: 'column', // 使用column布局 border: false, // 不显示子元素的边框 items: [ { // 第一行第一列 columnWidth: .33, layout: 'form', border: false, items: [ new Ext.form.ComboBox({ // 创建...

    ExtJS-3.4.0系列目录

    - `Column`:列布局,子组件按列排列。 - `Border`:边框布局,复杂的布局结构,常用于主内容和侧边栏的展示。 - **Ext.container.Viewport**:全屏容器,用于包裹整个应用界面。 - **Ext.tab.Panel**:页签面板...

    表单布局实例

    总结起来,这个表单布局实例展示了如何在ExtJS中使用`border`布局创建复杂的多区域界面,以及如何利用`FormPanel`和`column`布局来构建表单。通过组合这些布局技术,开发者可以创建出适应性强、易于使用的用户界面,...

    ExtJSWeb应用程序开发指南(第2版)

    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 ...

    extjs的快速入门教程

    - **Column列布局**: 按列排列组件。 - **Fit布局**: 使子组件填充其父容器的全部空间。 - **Form布局**: 专为表单设计,自动调整字段的宽度。 - **Accordion布局**: 类似于手风琴,展开时隐藏其他项。 - **...

    ExtJS基础教程.pdf

    1. **布局类**:包括容器布局(Container Layout)、绝对定位布局(Absolute Layout)、手风琴布局(Accordion)、锚点布局(Anchor Layout)、边框布局(Border Layout)、卡片布局(Card Layout)、列布局(Column Layout)、...

    Ext.form.FieldSet的用法.pdf

    6. **layout**:FieldSet 使用的布局类型,可以选择 `accordion`、`anchor`、`border`、`card`、`column`、`fit`、`form` 或 `table`。可以通过 `layoutConfig` 配置进一步定制布局参数。 7. **animCollapse**:...

    Ext Js权威指南(.zip.001

    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....

    EXT4.3实现动态表单全动态

    - **配置驱动**:通过JSON或其他数据格式定义表单和grid的布局、字段、列等信息,实现配置文件驱动的动态生成。 - **响应式设计**:EXT4.3支持响应式布局,可以自适应不同设备和屏幕尺寸,确保动态表单和grid在...

Global site tag (gtag.js) - Google Analytics