How to scroll vertically in sencha touch?

Question

I am using sencha touch carousel, in which i am using horizontal swipe. Which works perfect. But within that i am using panels which i want to scroll vertically(scroll each page to the bottom). How to do that? I have given scroll:'vertical' in each panel as follows:

var myFirstPage = Ext.Panel({
      id:'tableId',
          iconCls:'myToolBar',
          style:'overflow:auto;' ,
          scroll:'vertical',
          items:.........});
Ext.setup( {
    onReady: function() {
      myCarouselId = new Ext.Carousel({
        fullscreen: true,
        id:'myCar',

        items : [ myFirstPage]...............});

But i cant scroll the panel to the bottom . Where am going wrong?

Sencha touch vertical scroll content in a horizontal carousel . Accroding to this stackoverflow answer we can scroll child contents vertically in horizontal carousel , same issue like me. But i am doing the same here , which i cant scroll. My child panel contains vbox and hbox layout.

Can somebody answer my question ?

Answer 1

Edit: If you want 'hbox' usability inside your panels, you need to fit its width inside the container.
If it will need to create scrollbars of its own, it will fail to do so.

What you need is to define scrolling differently:

scrollable: {
    direction: 'vertical',
    directionLock : true
}

Like this:

    var carousel = Ext.create('Ext.Carousel', {
fullscreen: true,
items : [ 
    {  xtype: 'panel',     
       scrollable: {
         direction: 'vertical',
         directionLock: true
       },
       html: 'This panel is scrollable!',
       items: [{
                xtype: 'textfield',
                name : 'first',
                label: 'First'
            },
            {
                xtype: 'textfield',
                name : 'second',
                label: 'Second'
            },{
                xtype: 'textfield',
                name : 'third',
                label: 'Third'
            },{
                xtype: 'textfield',
                name : 'first1',
                label: 'First1'
            },
            {
                xtype: 'textfield',
                name : 'second1',
                label: 'Second1'
            },{
                xtype: 'textfield',
                name : 'third1',
                label: 'Third1'
            },{
                xtype: 'textfield',
                name : 'first12',
                label: 'First12'
            },
               { xtype: 'panel',
                layout: 'hbox',
                width: 200,
                items: [{
                    xtype: 'textfield',
                    name : 'first-box',
                    label: 'First-box'
                },
                {
                    xtype: 'textfield',
                    name : 'second-box',
                    label: 'Second-box'
                },{
                    xtype: 'textfield',
                    name : 'third-box',
                    label: 'Third-box'
                }]
           }, {
                xtype: 'textfield',
                name : 'second12',
                label: 'Second12'
            },{
                xtype: 'textfield',
                name : 'third12',
                label: 'Third12'
            }]
    }, {
       xtype: 'panel',
       scroll:'vertical',  // will not work
       html: 'This panel is not scrollable!',
    }]
});

You can try this within any live preview of sencha docs
Hope this helps

Answer 2

Try this, it worked for me and i got it from sench forum

set the scrollable config in Panel

scrollable : {
      direction     : 'vertical',
      directionLock : true
}

Example

var myFirstPage = Ext.Panel({
          id:'tableId',
          iconCls:'myToolBar',
          scrollable : {
            direction     : 'vertical',
            directionLock : true
         },
        items:.........});

Ext.setup( {
    onReady: function() {
      myCarouselId = new Ext.Carousel({
        fullscreen: true,
        id:'myCar',
        items : [ myFirstPage]...............});

see this fiddle