Displayfield alignment problem

Hi , I am facing very strang problem. I am not able to align the value of displayfield. I want it to align to right to indicate it as numeric field. Please help me out.I am testing on the code from ext js documentation itself with some modification.

Code:

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 300,
    height: 120,
    //bodyPadding: 10,
    title: 'Final Score',
    items: [{
        xtype: 'displayfield',
        fieldLabel: 'Home',
        name: 'home_score',
        value: '10012115454554141341343',
        //fieldStyle : "text-align:left",
        labelStyle : "text-align:left",
        listeners:{
            afterrender:function(){
                this.el.setStyle("text-align","right");
            }
        }
    }, {
        xtype: 'displayfield',
        fieldLabel: 'Visitor',
        name: 'visitor_score',
        value: '11',
        labelStyle : "text-align:left",
         listeners:{
            afterrender:function(){
                this.el.setStyle("text-align","right");
            }
        }
    }],
    buttons: [{
        text: 'Update'
    }]
});