Forms 列布局似乎不正确

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: '

我有一个抽象表单,它描述了任何基本字段。我的想法是,表单显示为3列布局。 因此,我写道:

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};