Question

我有一个抽象的表单，描述了任何基本字段。我的想法是，表单显示为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); 
   }

表单显示列中的正确字段。但是，列不显示内联，否则，一个在另一个之下。

任何想法？。

Answer 1

列布局中的项目需要指定width（以像素为单位的值）或columnWidth（比率）。例如，要有三列宽度相等的列：

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

列布局似乎不正确

1 个答案: