Sencha touch 2.3 issue with hbox and textfield and textareafield - sencha-touch-2

Question

I have created a layout in sencha using vbox and hbox layout.But the issue is when I uses textfield and textareafield ,its size remain same even though the screen size varies.
I searched a lot on google and found many having the same issue.
Code below
Ext.define('GS.view.RequestNew', {
extend : 'Ext.form.Panel',
xtype: 'requestnew',
requires: [
'Ext.Label',
'Ext.Img',
'Ext.field.TextArea'
],
config: {
title : 'Test',
iconCls: 'favorites',
layout:'fit',
items: [
{
xtype: 'panel',
layout: 'vbox',
items: [
{
flex: 1,
layout: 'vbox',
items: [
{
flex: 9,
layout: 'vbox',
style: 'background-color: #A96D13;',
items : [{
flex: 1,
layout: 'vbox',
items:[{
flex: 1,
layout:'vbox',
items: [{
flex: 1,
layout:'vbox',
style:'background-color: #C48627;',
margin : '6px 6px 6px 6px',
items:[{
flex: 1,
layout:'vbox',
style:'background-color: #C48627;',
margin : '6px 6px 6px 6px',
items:[
{
flex: 1,
layout:'vbox',
items: [{
flex: 1,
layout:'vbox',
items:[
{
flex: 1,
xtype: 'label',
html: 'Source Location',
style: 'color:white;font-weight:bold;margin-top:21px;'
},
{
flex: 1,
layout:'hbox',
items:[
{
flex: 7,
layout: 'fit',
items : [{
xtype: 'textfield',
name: 'location',
height: 45,
maxRows: 10,
maxHeight: 10,
autoMaximize: true
}]
},
{
flex:1,
style:'background-color: #FEDE65;',
xtype: 'image',
src: 'http://abc/resources/images/img_dropdown_icon.png'
}
]
}
]
}]
}
]
}]
}]
}]
}]
}
]
}
]
}
]
} });