Forms 列布局似乎不正确
我有一个抽象表单,它描述了任何基本字段。我的想法是,表单显示为3列布局。 因此,我写道:Forms 列布局似乎不正确,forms,layout,extjs4,inline,multiple-columns,Forms,Layout,Extjs4,Inline,Multiple Columns,我有一个抽象表单,它描述了任何基本字段。我的想法是,表单显示为3列布局。 因此,我写道: Ext.define('AM.view.forms.UsuarioBase',{ extend: 'Ext.form.Panel', bodyPadding: '5px 5px 5px 5px', bodyStyle: 'border: none', fieldDefaults: { labelWidth: 65, labelAlign: '
Ext.define('AM.view.forms.UsuarioBase',{
extend: 'Ext.form.Panel',
bodyPadding: '5px 5px 5px 5px',
bodyStyle: 'border: none',
fieldDefaults: {
labelWidth: 65,
labelAlign: 'top'
},
initComponent: function(){
this.infoPersonal = [ anyFields ];
this.infoCuenta = [ anotherFields ];
this.infoContacto = [
{ fieldLabel: 'Tel Casa', name: 'Contacto-2', allowBlank: true},
{ fieldLabel: 'Tel Movil', name: 'Contacto-3', allowBlank: true},
{ fieldLabel: 'Tel Trabajo', name: 'Contacto-1', allowBlank: true},
{ fieldLabel: 'Tel Otro', name: 'Contacto-4', allowBlank: true},
{ fieldLabel: 'E-mail', name: 'Email', allowBlank: true},
{ fieldLabel: 'Domicilio', name: 'Domusuario', allowBlank: true}
];
this.items = [{
bodyStyle: 'border: none',
layout: 'column',
items: []
}];
this.callParent(arguments);
}
});
字段是变量,因为在子类中我可以添加/删除/编辑一个或多个字段
因此,在子类中,我会:
initComponent: function(){
this.callParent(arguments);
// Columnas
var primeraCol = {defaultType: 'textfield', style:'margin-left: 2px',items: this.infoPersonal};
var segundaCol = {defaultType: 'textfield', style:'margin-left: 2px',items: this.infoContacto};
var terceraCol = {defaultType: 'textfield', style:'margin-left: 2px',items: this.infoCuenta};
this.add(primeraCol);
this.add(segundaCol);
this.add(terceraCol);
}
表单将在列中显示正确的字段。但是,列不显示内联,否则,一列在另一列的下面
有什么想法吗?列布局中的项目需要指定
宽度(像素值)或列宽度(比率)。例如,要使三列宽度相等,请执行以下操作:
var primeraCol = {columnWidth: 0.333, defaultType: 'textfield', style:'margin-left: 2px',items: this.infoPersonal};
var segundaCol = {columnWidth: 0.333, defaultType: 'textfield', style:'margin-left: 2px',items: this.infoContacto};
var terceraCol = {columnWidth: 0.333, defaultType: 'textfield', style:'margin-left: 2px',items: this.infoCuenta};