buttons are apperaing as text using extjs4.2 and chroma version 38.0

Hi ,

buttons are apperaing as text using extjs4.2 and chroma version 38.0.

ANd also i am tring to keep my panel as center of the page still it is not showing in center.

And using datefield the date icon is not showing .

I am using extjs4.2 and chroma 38 .

Waiting quick reply .

using layout as according giving me error undefined is not a function .

please finf below my code

Ext .application({

name : 'LP' ,

appFolder : 'loginPage' ,

launch: function () {

var filterPanel = Ext .create('Ext.form.Panel' , {

bodyPadding : 20, // Don't want content to crunch against the borders
width : 400,

title : 'Login Page' ,

layout : {

// layout-specific configs go here
type : 'fit' ,

titleCollapse : false ,

animate : true ,

activeOnTop : true
},

border :true ,

backgroundColor : 'black' ,

renderTo : Ext .getBody (),

items : [{

xtype : 'textfield' ,

id :'txtNameID' ,

fieldLabel : 'FirstName' ,

afterLabelTextTpl : '<span style="color:#ff0000;font-weight:bold" data-qtip="Required">*</span>'

}, {

xtype : 'textfield' ,

id :'txtLastNameID' ,

fieldLabel : 'Last Name' ,

afterLabelTextTpl : '<span style="color:#ff0000;font-weight:bold" data-qtip="Required">*</span>'


},

{

xtype : 'textfield' ,

id :'txtCMPID' ,

fieldLabel : 'Company Name'
},

{

xtype : 'textfield' ,

id :'txtEmailID' ,

fieldLabel : 'Email' ,

afterLabelTextTpl : '<span style="color:#ff0000;font-weight:bold" data-qtip="Required">*</span>'
},

{

xtype : 'datefield' ,

name : 'DOB' ,

fieldLabel : 'DOB' ,

id : 'from'



},

{

xtype : 'textfield' ,

fieldLabel : 'Age' ,

id :'txtAgeID'


},

{

xtype : 'textfield' ,

fieldLabel : 'Time' ,

id :'txtTimeID'


},

{

xtype : 'button' ,

align :'left' ,

enableToggle : true ,

disabled : false ,

text : 'Save' ,

id :'btnSave'
},

{

xtype :'button' ,

align :'left' ,

enableToggle : true ,

text : 'cancel' ,

id :'btnCancelId'
}

]

});

}

});

buttons are apperaing as text using extjs4.2 and chroma version 38.0