Scrollbar Issue.

[pradipkumar]

Hi,
In sencha touch application the scrollbar is not working properly.I used the code like this.
1>scrollable: { direction: 'vertical',
directionLock: true
}
scrollbar is showing but it is not fully working.I also tried like this: scroll: true, but this also not working ..


Thanks in advance .

[suzuki1100nz]

Hi,
Post is probably better place in the touch forums - someone from Sencha may move it.

Have a look at this - http://docs.sencha.com/touch/2-1/#!/...r-event-scroll
This has an example of placing a scroll on a container.

To help you we need a full code sample of the "component" etc... that you are trying to make scrollable.
When you say "it is not fully working" what exactly do you mean?

What version of Touch are you using?

[pradipkumar]

Hi,
Please check the below code.

Ext.define('MyApp.view.DetailsScreen',{ extend:'Ext.Panel',
xtype:'detailsscreencard',

config:{
fullscreen: true,
layout:'card',
scrollable: {
direction: 'vertical',
directionLock: true
},
items:[{
xtype:'titlebar',
title:'Deal Name',
id:'titlebar_detailscreen',
docked:'top',
items:{xtype: 'spacer'},
items:{
xtype:'button',
text:'back',
align:'left'
}
},
{
xtype:'panel',
docked:'top',
layout:'hbox',
cls:'details_first',
style:'background-color: #FFCAC3;',
height:'120px',
items:[
{
flex:3,
xtype:'panel',
margin:'5px',
id:'itemimage'

},
{
flex:7,
xtype:'img',
margin:'5px',
height:'90px',
width:'180px',
border :'1px solid black',
id:'mapview',
useCurrentLocation: true,
},


]
},
{
xtype:'panel',
docked:'top',
layout:'hbox',
style:'background-color:white;',
items:[{
flex:1,
xtype:'button',
iconCls: 'timeremain',
id:'time_remaining',
iconMask: true,
text:'refresh',
},
{
flex:1,
xtype:'button',
iconCls: 'discount_per',
id:'discount',
iconMask: true,
text:'refresh',
},
{
flex:1,
xtype:'button',
id:'distance',
iconCls: 'distane_val',
iconMask: true,
text:'refresh',
}]
},
{
xtype: 'label',
html: 'HIGHLIGHTS',
docked:'top',
cls:'dec_test',


},
{
xtype:'panel',
id:'highlights',
docked:'top',
cls:'descr',
html:['<div>',
'<h4>SPA TREATMENT</h4>',
'<p>Have it all at Oasis Day Spa : a skin-perfecting facial,<br/>rejuventating ,essage, body scrub</p>',
'</div>'
].join('')
},
{
xtype: 'label',
html: 'TERMS AND CONDITIONS',
docked:'top',
cls:'dec_test',


},
{
xtype:'panel',
id:'dealterms',
docked:'top',
cls:'descr',
html:['<div>',
'<h4>SPA TREATMENT</h4>',
'<p>Have it all at Oasis Day Spa : a skin-perfecting facial,<br/>rejuventating ,essage, body scrub</p>',
'</div>'
].join('')
},
{
xtype: 'label',
docked:'top',
html: 'DESCRIPTION',
cls:'dec_test',
},
{
xtype:'panel',
docked:'top',
id:'description',
cls:'descr',
html:['<div>',
'<h4>SPA TREATMENT</h4>',
'<p>Have it all at Oasis Day Spa : a skin-perfecting facial,<br/>rejuventating ,essage, body scrub</p>',
'</div>'
].join('')
}
{
xtype:'grabbuttons',
cls:'tab_fixed',
docked:'bottom',
}]
}
});


Here the scrollbar is coming on the last panel but i need the scrollbar will come whole panel.Please give any solution for this.

Thanks for giving your valuable time.

[suzuki1100nz]

You'll need to wrap your code in code tags to make it readable.

Do you want the whole screen to scroll? If so apply the scrollable setting to the viewport not the panel with card layout.

[pradipkumar]

Hi,
I have attached the screen shot,kindly check once. scrollbar is showing on the bottom panel.,how i put this scrollbar whole my screen.I have marked as box.Please find it. Many many thanks sir for your help.
2012-11-19_1420.jpg

[suzuki1100nz]

ok your highlights, terms and conditions and description panels should be just child containers inside a parent container with a vbox layout (not panels that are docked top)
Apply the scrollable config to this new parent container.

Then highlights, terms and conditions and description area will hiave the scroll which is what I assume you want