`
qinya06
  • 浏览: 582872 次
  • 性别: 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两行两列布局

    Extjs fieldset两行两列布局

    ExtJS3.2列布局

    Ext3.2的列布局,排列方式,适用于form表单中一行几列的排序方式

    Extjs 之主界面布局

    Extjs 之主界面简单布局,适合刚刚接触ext的新手学习,就一个html页面。 现在拿来分享。

    ExtJS锁定列头源码

    ExtJS锁定列头源码 ExtJS锁定列头源码

    学习ExtJS Column布局

    layout:”column” Panel进行列布局。 在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。 columnWidth表示使用百分比的形式指定列宽度。 width则是使用绝对象素的方式指定列宽度,在实际应用中可以...

    ExtJs4 layout 布局

    ExtJs4 layout 布局 这是鄙人之前自学Ext时收集的文档,详细讲诉了各种布局,并附源码与界面展示,希望能给你带来帮助

    ExtJs 后台通用界面布局,左侧树,Center Tab 选项

    ExtJs 后台通用界面布局,左侧树,Center Tab 选项

    extjs设计实例包含Grid和布局的设计

    extjs设计实例包含Grid和布局的设计

    ExtJs布局教程Ext详细布局

    Extjs布局教程,Extjs 布局,非常好用的Extjs布局教程

    ExtJS布局之border实例

    资源名称:ExtJS布局之border实例内容简介:border布局是常见的布局样式,本文档中一个实际项目的示例,比较简单,仅供初学者参考。感兴趣的朋友可以过来看看。自动生成行号,支持checkbox全选,动态选择显示哪些列...

    ExtJs中表单formPanel的横向布局

    ExtJs中表单formPanel的横向布局

    extjs 可拖拽页面布局效果

    extjs页面布局,可拖拽也可以根据你个人的需求,实现相关模块的显示和隐藏

    ExtJs常用布局--layout详解实例代码

    ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 该文件含ext3.2.0压缩版,可直接运行哦...

    extjs2.0 下拉列

    此处做一个extjs下拉列,以备后用。该项目中包涵使用说明,将项目下载下来按照使用说明即可。 本人也是extjs的初学者,有不足之处希望使用该资源的兄弟姐妹指出,希望对大家有帮助。

    ExtJS 2.0实用简明教程

    9)Column列布局 10)组件的使用 11)Fit布局 12)Form布局 13)组件的配置属性 14)Accordion布局 15)事件处理 16)Card布局 17)Pable布局及其它布局 18)工具栏Toolbar 19)选项面板TabPanel 20)基本表格GridPanel 21)视图...

    Extjs4 layout 布局

    用extjs4搭的一个简单布局框架

Global site tag (gtag.js) - Google Analytics