PDA

View Full Version : Simply trying to right-align a column



lcuff
23 Sep 2011, 1:21 PM
As a beginner, the simple task of trying to right-align the numbers in a column is eluding me:

The numbers appear left aligned.

Thanks in advance for any and all help.

Leonard


var details_panel =
Ext.create('Ext.form.Panel', {
title: 'Details for selected advertiser',
items: [{
xtype: 'form',
layout: 'column',
align: 'right',
defaults: {
border: false,
align: 'right'
},
fieldDefaults: {
labelWidth: 150,
labelAlign: 'left',


},


items: [
{
xtype: 'panel',
columnWidth: 0.33,
items: advertiser_overview_display_items
},
{
xtype: 'panel',
columnWidth: 0.33,
items: budget_and_spend_display_items
},
{
xtype: 'panel',
columnWidth: 0.33,
items: spend_and_margin_display_items
}
]
}]
});
var budget_and_spend_display_items =
[{
xtype: 'currencyfield',
fieldLabel: 'Total Budget',
name: 'total_budget'
},{
xtype: 'currencyfield',
fieldLabel: 'Budget Remaining',
name: 'budget_remaining'
},{
xtype: 'currencyfield',
fieldLabel: 'Daily Spend Needed',
name: 'daily_spend_needed'
}];

Ext.define('CurrencyField', {
extend: 'Ext.form.field.Display',
alias: ['widget.currencyfield'],


valueToRaw: function(value) {
if (typeof value === 'undefined') {
return ('');
}
return Ext.util.Format.currency(value, '$ ', 2);
}
});

twaindev
24 Sep 2011, 1:59 PM
Add an anchor layout to the panels containing the currency fields, set the anchor of the fields to 100% and add a fieldStyle 'float: right'.


{
xtype: 'panel',
layout: 'anchor',
width: 500,
bodyPadding: '5',
border: false,
defaults: {
xtype: 'currencyfield',
anchor: '100%',
fieldStyle: 'float: right'
},
items: [{
fieldLabel: 'Total Budget',
name: 'total_budget'
},{
fieldLabel: 'Budget Remaining',
name: 'budget_remaining'
},{
fieldLabel: 'Daily Spend Needed',
name: 'daily_spend_needed'
}]
}
HTH

lcuff
26 Sep 2011, 10:46 AM
This works. Thanks!