活动公告当前位置:星鸿娱乐 > 活动公告 > >

ExtJS的FieldSet的column列布局

  

[ExtJS,column,列布局]ExtJS的FieldSet的column列布局

  以下是自己扩展的FieldSet:  
代码如下:
  
ME.Base.FieldSet = Ext.extend(Ext.form.FieldSet, {  
layout: 'column',  
fieldSetItems: [],  
autoScroll:false,  
defaults: {  
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);  
}  
});  
  
代码如下:
  
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);  
}  
});  

(责任编辑:admin)

上一篇:星鸿娱乐javascript动态添加样式(行内式/嵌入式/

下一篇:Js 网页上反复显示隐藏效果的文本

推荐内容

客户服务热线

010-400-12345

在线客服