Aligning a text on an extjs label - extjs

Question

I am new to extjs.I am designing a pop up window which basically populates some data from the server.I have used the layout as 'fit' and I am using labels for displaying the data.Here is my code
win = new Ext.window.Window({
title: 'Data point details',
layout: 'fit',
width: 'auto',
height: 500,
modal: false,
closeAction: 'destroy',
layout: {
type: 'table',
// The total column count must be specified here
columns: 2,
rows :10 ,
tdAttrs:
{
style:
{
margin: '160px',
valign: 'top' ,
padding: '8px' ,
'font-size' : '12px'
}
}
},
defaults: {
bodyPadding: 10 ,
},
items: [
{
xtype: 'label',
text: 'Element : ' ,
style:
{
'font-weight':'bold',
'labelAlign' : 'right',
}
},
{
xtype: 'label',
text: elementname
},
{
xtype: 'label',
text: 'Expression: ' ,
style:
{
'font-weight':'bold',
}
},
{
xtype: 'label',
text: s.expressionName
},
{
xtype: 'label',
text: 'Profile: ' ,
style:
{
'font-weight':'bold',
}
},
{
xtype: 'label',
text: s.profileName
},
{
xtype: 'label',
text: 'Time:',
style:
{
'font-weight':'bold',
}
},
{
xtype: 'label',
text: Highcharts.dateFormat('%a, %b %e, %Y, %I:%M %p ', this.x)
},
{
xtype: 'label',
text: 'Value:',
style:
{
'font-weight':'bold',
}
},
{
xtype: 'label',
text: yvalue ,
},
{
xtype: 'box',
style : {
padding: '0px',
height: '90px',
//background : 'white',
},
html: new Ext.XTemplate("<div style=\"height:150px;\">{value}")
.apply({value: me.htmldiv.innerHTML })
},
]
});
win.show();
I want the columns which appear on the left hand side to have their text on the right,but the text is always towards the left for all the cells it seems .Likw for example the label which has the text 'Element' appears to be on the left.I have used labelalign but it does not work.Kindly give suggestions

Answer 1

Just few suggestions until i get to the solution:
You have reduntant comas all over the place. Some older browsers will fail on such thing. Example:
{ 'font-weight':'bold',<<-- here }
win = new Ext.window.Window(... - this is global variable declaration - probably worst thing you can do in JavaScript and way to hell. Use var keyword to declare local variables like so: var win = new Ext.window.Window(...
labelAlign is the way to align label text to the right BUT a) you are applying it through style property (styles which Ext apply to HTML element created by component) and b) labelAlign is property of Labelable components and as strange as it might sound, Label itself is not Labelable. Just don't use Label like this, see below...
Duplicate layout property on Window
When you are asking for help and posting code as part of the question, edit your code so that it doesn't contain exteral dependencies - can be copied and run immediately. It took me nearly half a hour to make your sample working
As i said before, you are using Lable component in the way it is not suppose to be used. Labels are not created directly but by specifying label properties on components implementing Labelable mixin (Fields in most cases). It might sound complicated but is not, take a look at the code:
var wnd = new Ext.window.Window({
title: 'Data point details',
width: 400,
height: 200,
modal: false,
closeAction: 'destroy',
layout: {
type: 'anchor',
align: 'stretch'
},
bodyPadding: 10,
defaults: {
labelAlign: 'right',
labelStyle: {
'font-weight': 'bold'
},
labelWidth: 100
},
items: [{
xtype: 'displayfield',
fieldLabel: 'Element',
value: 'elementname'
}, {
xtype: 'displayfield',
fieldLabel: 'Expression',
value: 's.expressionName' // s.expressionName
}, {
xtype: 'displayfield',
fieldLabel: 'Profile',
value: 's.profileName' // s.profileName
}, {
xtype: 'displayfield',
fieldLabel: 'Time',
value: 'time'
}, {
xtype: 'displayfield',
fieldLabel: 'Value',
value: 'yvalue' // yvalue
}]
});
wnd.show();
You can try it and play with it here. My final suggestion would be to take a look at the official ExtJS documentation and guides which are pretty good - here for example are samples on making forms...

Answer 2

Here is an approach to use css styles inline, not in a separate class. This could be useful if you get css values from your javascript constants:
this.myLabel = Ext.create('Ext.form.Label', {
text: 'My Label Name',
style: {
'text-align': this.defaults.myLabelAlign, // The javascript constant.
'font-size': this.defaults.myLabelStyle // The javascript constant.
}
});