Javascript-форум - Выравнивание по центру

Здравствуйте!
Помогите решить простенькую задачку.
Просто надо расположить компонент по центру но не получается. Может кто кинет примерчик?

<script>
Ext.onReady(function(){
    
var form = new Ext.form.FormPanel({
        baseCls: 'x-plain',
        layout:'form',
        defaultType: 'textfield',
        border: false,
        hideBorders: true,
        plain:true,
        labelWidth: 180,
    items: [
      {xtype:'textfield', id:'text', fieldLabel:'', value : 'Поле которое надо центрировать', width: 200},
      {xtype:'numberfield', id:'year', fieldLabel:'Тест 1', value : ''},
      {xtype:'numberfield', id:'month', fieldLabel:'Тест 2', value : '1'},
      {xtype:'checkbox', id:'inv', fieldLabel:'Тест 3'}




           ]
    });

var win = new Ext.Window({
        title: 'Ia?aiao?u io?aoa',
        width: 400,
        height: 200,
        layout: 'fit',
        border: false,
        hideBorders: true,
        plain:true,
        items: [form]
    }).show();
    
    
});

</script>

центрировать нужно первое поле xtype:'textfield' Прошу помощи! layout и layoutConfig пробовал и align что то не действует. наверное что то не то делаю так как с компонентом всего неделю работаю...

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>demo</title> <script type='text/javascript' src='http://docs.sencha.com/ext-js/4-0/extjs/ext-all.js'></script> <link rel="stylesheet" type="text/css" href="http://docs.sencha.com/ext-js/4-0/extjs/resources/css/ext-all.css"> <script> Ext.onReady(function() { var form = new Ext.form.FormPanel({ renderTo: document.body, items: [ {xtype:'textfield', id:'text', fieldLabel:'', value : 'Поле которое надо центрировать', width: 200, style:'margin: 5px auto'}, {xtype:'numberfield', id:'year', fieldLabel:'Тест 1', value : ''}, {xtype:'numberfield', id:'month', fieldLabel:'Тест 2', value : '1'}, {xtype:'checkbox', id:'inv', fieldLabel:'Тест 3'} ] }); }); </script> </body> </html>