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

[pradipkumar]

Hi Sir,

What you told i am not getting.Please update my code, otherwise write some sample code which is better understandable for me.Thanks in advance.


Thanks & Regards,
Pradip Kumar

[suzuki1100nz]

OK quick sample

{
 //This is the parent container that is scroll-able and wraps all the child containers
  xtype : container,
  scrollable : true,
  //Layout vbox stack child containers
  layout : {
    type : 'vbox',
    pack : 'start',
    align : 'stretch;
  }
  items : [{
      xtype : 'container',
      html : 'I am a child container first in the vbox stack' 
    },{
      xtype : 'container',
      html : 'I am a child container second in the vbox stack'
    }]
}

Layout Samples:
http://docs.sencha.com/touch/2-1/#!/guide/layouts
ExtJS (relevant)
http://docs.sencha.com/ext-js/4-1/#!...t-browser.html

Scrollable sample:
http://docs.sencha.com/touch/2-1/#!/...croll.Scroller

[pradipkumar]

Hi Sir,
with reference your code i modify my code but i am getting the same issue what screen shot i sent.Please check the below code if anything wrong on that please update it.

xtype:'container',
scrollable: true,
layout : {
type : 'vbox',
pack : 'start',
align : 'stretch'
},


items:[
{
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('')
}]

Please change the source code.

Thanks & Regards,
PradipKumar

[suzuki1100nz]

Sorry was in a hurry when I typed the sample and missed some quotes and put in a semi colon.

ok, First of all when your post code samples please wrap your code in code blocks.

Ext.application({
  name : 'Test',
  launch : function() {
                        
  var cont = Ext.create('Ext.Container', {
    //This is the parent container that is scrollable and 
    //wraps all the child containers
    scrollable : true,
    //Layout vbox stack child containers
    layout : {
      type : 'vbox',
      pack : 'start',
      align : 'stretch',
    },
    items : [{
      xtype : 'container',
      html : 'I am a child container first in the vbox stack'
    },{
      xtype : 'container',
      html : 'I am a child container second in the vbox stack'
    }]
  });
  Ext.Viewport.add(cont);
});