CODEWITHSUNDEEP
formslayoutextjs4inlinemultiple-columns
ramiromd
ramiromd

Reputation: 2029

Column layout not seems correctly

i have a abstract form, that describes any basics fields. My idea, is that the form is shown with 3 columns layout. So, i write:

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

The fields, are in variables, because in the subclass i can add/remove/edit one or more fields.

So, in the subclass i do:

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

The form is displayed with the correct fields in the columns. But, the columns not show inline, else, one below the other.

Any ideas ?.

Upvotes: 0

Views: 34

Answers (1)

Towler
Towler

Reputation: 1562

The items in your column layout need to have either width (a value in pixels) or columnWidth (a ratio) specified. For example, to have three columns of equal width:

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

Upvotes: 1

Related Questions