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

　　推荐阅读

　　Jquery操作Select 简单方便 一个js插件搞定

这里是js的代码： 复制代码 代码如下: jQuery.fn.size = function() { return jQuery(this).get(0).options.length; } //获得选中项的索引 jQuery.fn.getSelectedIndex = function() { return jQuery(this).get(0)>>>详细阅读

本文标题：ExtJS的FieldSet的column列布局

地址：http://www.17bianji.com/kaifa2/JS/27695.html

 1/2    1