Posted in Javascript onNovember 20, 2009
以下是自己扩展的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); } });
ExtJS的FieldSet的column列布局
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@