PDA

View Full Version : Labels doesn't align correctly in a panel with a table layout



Aubin Mahé
29 Oct 2013, 9:49 AM
Ext.define( 'LFinanceCRM.view.ClientViewEtatCivil', {
extend : 'Ext.form.Panel',
alias : 'widget.client-view-etat-civil',
requires : ['Ext.layout.container.Table',
'Ext.form.FieldSet',
'Ext.form.Label',
'Ext.form.field.Number',
'Ext.form.field.Text'],
items : [{
xtype : 'fieldset',
title : 'Etat civil',
collapsible : false,
layout : {
type : 'table',
columns : 3
},
defaults: {
hideLabel : true
},
items: [
{xtype:'label',text:'',width:120},
{xtype:'label',align:'middle',text:'Empruteur' ,width:200},
{xtype:'label',align:'middle',text:'Co-Empruteur',width:200},
{xtype:'label',align:'right',text:'Nom : '},
{xtype:'textfield',name:'nameE'},
{xtype:'textfield',name:'nameC'},
{xtype:'label',align:'right',text:'Prénom : '},
{xtype:'textfield',name:'fornameE'},
{xtype:'textfield',name:'fornameC'},
{xtype:'label',align:'right',text:'Date de naissance : '},
{xtype:'datefield',name:'naissanceE'},
{xtype:'datefield',name:'naissanceC'},
{xtype:'label',align:'right',text:'Lieu de naissance : '},
{xtype:'textfield',name:'lieuNaissanceE'},
{xtype:'textfield',name:'lieuNaissanceC'}
]
}]
});
is rendered like this :


46614


My questions are :

Why the labels are not correctly aligned i.e. right aligned for the label on the left and centered for the two top labels ?
How can I tune my labels ?

scottmartin
31 Oct 2013, 6:28 PM
Column layout is sort of a clunky approach .. perhaps something like:



Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',

width: 650,

layout: {
align: 'stretch',
type: 'vbox'
},
bodyPadding: 10,
title: 'My Form',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'container',
layout: {
align: 'stretch',
type: 'hbox'
},
padding: 2,
items: [
{
xtype: 'textfield',
flex: 1.5,
labelWidth: 120,
fieldLabel: 'Nom'
},
{
xtype: 'textfield',
flex: 1.0
}
]
},
{
xtype: 'container',
layout: {
align: 'stretch',
type: 'hbox'
},
padding: 2,
items: [
{
xtype: 'textfield',
flex: 1.5,
labelWidth: 120,
fieldLabel: 'Prénom'
},
{
xtype: 'textfield',
flex: 1.0
}
]
},
{
xtype: 'container',
layout: {
align: 'stretch',
type: 'hbox'
},
padding: 2,
items: [
{
xtype: 'textfield',
flex: 1.5,
labelWidth: 120,
fieldLabel: 'Date de naissance'
},
{
xtype: 'textfield',
flex: 1.0
}
]
}
]
});

me.callParent(arguments);
}

});

Ext.application({
name: 'Fiddle',

launch: function() {
Ext.create('MyApp.view.MyForm', {
renderTo: Ext.getBody()
});


}
});

Aubin Mahé
1 Nov 2013, 1:35 AM
Your suggestion shows only one column of fields, can you improve your post to reproduce the image I've posted, please?
The problem is basic: how to display a matrix of input fields?
At first time, we may answer "with a grid, a table of records", but...
In this case, each row have it's own structure, so a table doesn't fit my needs.

scottmartin
1 Nov 2013, 4:12 AM
Your suggestion shows only one column of fields,

I am not sure what you mean .. did you run the app, or did I not see the correct image?

Click the preview button

1ap

Aubin Mahé
1 Nov 2013, 6:58 AM
Finally, I've made a base class (It's named AbstractTableForm but I don't known how to code the abstract class concept in Javascript) :

Ext.define( 'LFinanceCRM.view.AbstractTableForm', {
extend : 'Ext.form.Panel',
requires :['Ext.layout.container.Table','Ext.form.FieldSet'],
items : [{
xtype : 'fieldset',
collapsible : false,
layout : {
type : 'table',
tdAttrs : { style : { textAlign : 'right' }}
},
defaults : {
hideLabel : true,
xtype : 'label'
}
}],
constructor : function() {
var columns = this.specs[0].columns;
var columnCount = columns.length + 1;
var fieldSet = this.items[0];
fieldSet.layout.columns = columnCount;
fieldSet.title = this.specs[0].title;
fieldSet.items = new Array();
fieldSet.items.push({text:''});
for( var i = 0; i < columns.length; ++i ) {
fieldSet.items.push({text:columns[i]});
}
for( var i = 1; i < this.specs.length; ++i ) {
var item = this.specs[i];
if( item.text ) {
item.margin = '0 6 0 0';
}
else if( item.xtype == undefined && item.name ) {
item.xtype = 'textfield';
}
fieldSet.items.push( item );
}
this.callParent( arguments );
console.log('new AbstractTableForm');
}
});
A concrete class :

Ext.define( 'LFinanceCRM.view.ClientViewActivites', {
extend : 'LFinanceCRM.view.AbstractTableForm',
alias : 'widget.client-view-activites',
specs : [
{ title : 'Activité',
columns :['Empruteur_________',
'Co-Empruteur______']},
{text:'Profession' },{name:'professionE' },
{name:'professionC' },
{text:'Employeur' },{name:'employeurE' },
{name:'employeurC' },
{text:'Ville' },{name:'employeurVilleE'},
{name:'employeurVilleC'},
{text:'Type de contrat'},{name:'contratE' },
{name:'contratC' },
{text:'Ancienneté' },{name:'ancienneteE' ,xtype:'numberfield'},
{name:'ancienneteC' ,xtype:'numberfield'}
],
constructor : function() {
this.callParent( arguments );
console.log('new ' + this.self.getName());
}
});
The result:
46669
As you can see in the code and in the image, underscores have been added to prompts to center them.
How can I center 'Emprunteur' and 'Co-Emprunteur' in their columns ?

scottmartin
1 Nov 2013, 8:18 AM
I have update the example in my fiddle post .. please run preview again

46670

Aubin Mahé
1 Nov 2013, 8:30 AM
Your proposal have the look I searched but with another layout than 'table'.
Thank you very much for your help.