I have a tab view in my app which is docked bottom. In the top there is one top bar with log. And middle of the screen i have buttons and field set. As the device height is less, i want to scroll the field set, so user can enter the text and press the submit button. But the field set is not scrolling. Here is my code part::
{ xtype : 'container',
styleHtmlContent : true,
scrollable: true,
layout : {
type : 'card'
},
title : 'Home',
iconCls : 'home',
items : [ {
xtype : 'image',
docked : 'left',
height : 92,
id : 'Logoimage',
ui : '',
width : 120,
src : 'app/images/small_logo.png'
}, {
xtype : 'titlebar',
cls : 'mytitlebar',
docked : 'top',
height : 80,
ui : 'blue',
items : [ {
xtype : 'label',
height : 36,
html : 'Consumer signup',
id : 'title',
margin : 20,
style : 'font: normal Bold 20px droid sans; color:#AB3951',
} ]
}, {
xtype : 'container',
docked : 'top',
id : 'dashboardiconcontainer',
scroll: 'vertical',
layout : {
type : 'fit',
pack : 'center',
align : 'middle'
},
items : [ {
xtype : 'label',
docked : 'top',
margin : '20 0 0 0',
html : 'Signup your customers to Teritree Portal',
id : 'signuplabel',
style : 'font: normal 24px droid sans'
}, {
xtype : 'fieldset',
docked : 'top',
margin : '20 0 0 0',
width : 600,
height : 200,
items : [ {
xtype : 'textfield',
id : 'consumername',
style : 'font: Droid Sans',
label : 'Consumer Name',
labelWidth : '30%'
}, {
xtype : 'numberfield',
id : 'Mobilenum',
style : 'font: Droid Sans',
label : 'Mobile',
labelWidth : '30%'
}, {
xtype : 'emailfield',
id : 'email',
label : 'Customer Email id',
labelWidth : '30%',
placeHolder : '[email protected]'
}, {
xtype : 'textareafield',
id : 'adressfield',
style : 'font: Droid Sans',
label : 'Address',
labelWidth : '30%'
}, {
xtype : 'textfield',
id : 'areafield',
style : 'font: Droid Sans',
label : 'Area/Location',
labelWidth : '30%'
}, {
xtype : 'selectfield',
label : 'City',
labelWidth : '30%',
options : [ {
text : 'Bangalore',
value : 'first'
}, {
text : 'Delhi',
value : 'second'
}, {
text : 'Mumbai',
value : 'third'
} ]
}, {
xtype : 'numberfield',
id : 'pinfield',
style : 'font: Droid Sans',
label : 'Pincode*',
labelWidth : '30%'
}, ]
}, {
xtype : 'button',
height : 40,
id : 'submitbtn',
// margin : '30 0 0 500',
ui : 'orange',
width : 220,
text : 'Submit'
} ]
}
]
}
The above code is for only tab. So how can i make that field set scroll-able??
Thanks in advance.