Sencha touch scroll is not working

Question

I have a main.js

**Ext.define('EDevlet.view.Main', {
viewport: {
    autoMaximize: true
},
extend: 'Ext.Container',
xtype: 'mainview',
defaultColumnCount: 2,
config: {
    scrollable:"vertical",
    cls: "page-content-style page-with-main-buttons",
    fullscreen: true,
    title: i18n["edevlet_title"],
    flex:1,
    height:800,
    layout: {
        type: 'vbox',
        align: 'stretch'

    },
    defaults: {
        flex:1
    },
    items: [{
        xtype: "panel",
       id: "greeting-message",
        cls: "greeting",
        docked: "top"
    }
    ]
},**


loadMenu: function () {   
    Logger.log("@Main::loadMenu");
    this.removeAll(true, false);
    var services = SegmentUtil.getServiceContent(), // boş olma ihtimali yok, BE den gelmez ise yereldeki DEFAULT segment içeriğini kullanıyor
        maxServiceSize = SegmentUtil.getHomePageMaxServiceSize(),
        columnCount = this.defaultColumnCount,
        rowCount = Math.ceil((maxServiceSize + 1) / columnCount), // +1 diğer servisler düğmesi için !
        index,
        service,
        title,
        itemId,
        button,
        menuRow,
        rowIndex,
        isLeftSide,
        verticalPosition = -1;

    Logger.log('services: ' + services);
    Logger.log('rowCount: ' + rowCount + ', columnCount: ' + columnCount + ', maxServiceSize: ' + maxServiceSize);

    // satırları oluştur
    var newCount=rowCount+1;
    for (index = 0; index < newCount; index++) {
        if(index==0){

               **this.add({
                   id: 'mainRow-' + index,
                   xtype: 'carousel',   flex:3,
                   layout: 'hbox',
                  defaults: {
                       flex:1
                   },       items: [
                                    {    id: 'Image1',
                                         html: ''
                                    },
                                    {  id: 'Image2',

                                        html: ''
                                    },
                                    {    id: 'Image3',
                                        html: ''

                                   },
                                    {   id: 'Image4',
                                       html: ''
                                    }
                                ]
        });
                this.requestBackEndForNewsUrl();
        }
        else{

        this.add({
            id: 'mainMenuRow-' + index,
            xtype: 'container',
            flex:2,
          layout: 'hbox',
            defaults: {
                flex:1
            }
        });
        }**
    }




        }



    }

And I have a load function.Load function add items(this items is image).But my scrool seem but not working.I hold scroll but if a release scroll is going up. I have a vbox.After two hbox is added.But scroll is not working.

Answer 1

Try this. Write this override code in app.js file & then check.

// Fix for scroll 
Ext.override(Ext.util.SizeMonitor, {
constructor: function (config) {
    var namespace = Ext.util.sizemonitor;
    return new namespace.Scroll(config);
}
});
Ext.override(Ext.util.PaintMonitor, {
constructor: function (config) {
    return new Ext.util.paintmonitor.CssAnimation(config);
}
});

Answer 2

Change your view's config to this:

scrollable: {
            direction: 'vertical',
            directionLock: true
},
flex:1,
height: '100%',

This will serve your purpose. Let me know if it helps or not.