0

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

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

有任何想法吗 ？。

4

1 回答 1

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};
于 2013-09-06T00:11:10.490 回答