How to center form fields and toolbar buttons? - extjs

Question

I am working in extjs4. I am geting stuck at a point where I want to format items in a panel at a center position properly. But I don't know how.
Actually I want to display all items at middle position not left side..also I want display submit button at center position but it get display at left side.. I am facing this problem...
here Is my some code :
Ext.define('Am.user.Registration', {
extend:'Ext.form.Panel',
//extend:'Ext.window.Window',
id:'registationId',
alias:'widget.Registration',
title:'Registration form',
resizable:false,
buttonAlign:'center',
closable:true,
titleAlign:'center',
//autoScroll:true,
draggable:false,
//shadow:true,
height:350,
width:800,
floating:true,
bodyPadding: 30,
//collapsible:true,
requires:[
'Balaee.view.sn.user.Captcha'
],
defaults:{
//align:'center'
defaultAlign:'t1-c'
},
//bodyStyle: 'align:center',
// Ext.require(['Ext.form.field.Date']);
items:[
{
xtype:'combo',
fieldLabel:'Language',
name:'language',
emptyText: 'Language',
store: ['Marathi','Hindi','English'],
queryMode: 'local',
editable:false
},
{
xtype: 'fieldcontainer',
fieldLabel: 'Name',
layout: 'hbox',
combineErrors: true,
defaults: {
hideLabel: true
},
items: [
{xtype: 'textfield', fieldLabel: 'First', name: 'firstName', emptyText: 'First name',width: 80, allowBlank: false,margins: '0 5 0 0'},
{xtype: 'textfield', fieldLabel: 'Middle', name: 'middleName',emptyText: 'Middle name', width: 80, allowBlank: true, margins: '0 5 0 0'},
{xtype: 'textfield', fieldLabel: 'Last', name: 'lastName', emptyText: 'Last name',width: 80, allowBlank: false,
validator: function(value) {
var password1 = this.previousSibling('[name=firstName]');
return (!(value === password1.getValue())) ? true : 'Dont give first name and last name same.'
}
}
]
},
{
xtype:'textfield',
fieldLabel:'Primary email',
name:'primaryEmail',
//anchor:'100%',
allowBlank:false,
emptyText: 'Email',
vtype:'email'
//labelAlign:'right',
},
---------------
--------------
],//End of items square
// buttons:[{
// xtype:'button',
// formBind: true,
// fieldLabel:'submitttttttt',
// action:'submitAction',
// text:'Submit',
// defaultAlign:'t1-c'
// }
// ],
bbar:
[
{
xtype:'button',
formBind: true,
fieldLabel:'submit',
action:'submitAction',
text:'Submit',
defaultAlign:'t1-c'
//flex:6,
},
],//End of buttons square
});// End of login class

Answer 1

You should apply an HBox layout (with pack: 'center') to your form and ditto for your toolbar.
You can see an example of how this is done for the form here. And for the toolbar:
var toolbar = new Ext.Toolbar({
dock: 'bottom',
layout:{
pack: 'center'
},
items: [{
xtype: 'button',
text: 'foobar',
handler: function(){
alert('ok');
}
}]
});