提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

ExtJS的FieldSet的column列布局

布局 Column Extjs fieldset
2023-06-13 09:14:14 时间
以下是自己扩展的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(){
varthisItems=newArray();
varitemsLen=this.fieldSetItems.length;
if(itemsLen>0){
for(vari=0;i<itemsLen;i++){
thisItems[thisItems.length]={
items:this.fieldSetItems[i]
}
}
}
this.items=thisItems;
ME.Base.FieldSet.superclass.initComponent.call(this);
}
});

复制代码代码如下:

newME.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(){
varthisItems=newArray();
varitemsLen=this.fieldSetItems.length;
if(itemsLen>0){
for(vari=0;i<itemsLen;i++){
thisItems[thisItems.length]={
items:this.fieldSetItems[i]
}
}
}
this.items=thisItems;
ME.Base.FieldSet.superclass.initComponent.call(this);
}
});

相关文章