How to enable scrollbar for this following overlay

Question

el.overlay = Ext.create('Ext.Panel', {
                                    itemId:'widgetInfoPanel',
                                    html: htmlText,
                                    height: 200,
                                    width: 300,
                                    autoScroll:true,
                                    modal: {
                                        style: 'opacity: 0'
                                    },
                                    hideOnMaskTap:true,
                                    items: [
                                        {
                                            xtype: 'button',
                                            text: "Close".toUpperCase(),
                                            cls: 'button-orange',
                                            listeners: {
                                                tap: function (button) {
                                                    el.overlay.hide();
                                                }
                                            }
                                        }
                                    ]
                                });

As you can see this is a simple overlay that is created on button click but when the html content is too long it is supposed to show a scrollbar as I have set the autoScroll propoerty to true but I do not see that.

How do i enable that, I am using sencha touch

Try "scrollable : true" instead of autoScroll. – Sujata Chanda Apr 22 '14 at 06:00 — Sujata Chanda, Apr 22 '14 at 06:00
@SujataChanda tried that also.. not working. :-( – Nick Div Apr 22 '14 at 17:18 — Nick Div, Apr 22 '14 at 17:18

score 0 · Answer 1 · answered Apr 28 '14 at 14:03

I'm not sure why are facing this problem, but as @Sujata Chanda suggests by replacing 'autoScroll' to 'scrollable' will solve the problem.

Here is the demo:

app.js:

Ext.application({ name: 'Demo', views: ['Main'],

launch:function() {
    var mainView = Ext.create('Demo.view.Main');
    //Ext.Viewport.add(mainView);
    var overlay = Ext.create('Ext.Panel', {
        itemId:'widgetInfoPanel',
        html: 'Hellllllloooojsdghaaaassssasdasdasdasdasdasdasfasfjgasjfasgfjasgfhasgfhjasgfhasgfjhasgfhdgfhjgasfjkagsfadsgfjhkdsagfjkaegfuywegfkjsadgfuwegfjaesgfiouwerhiuwegrowergiuweghfksjdbfsudiyriuweahbrkjewhabfuweyuiwehiuewhiuuuuudhfudsfhdsufjsdhgfuwiaegfdjsbfiuweagiwejhiuewriewougrhoiweuqgioweuagfiuadsgfuagsefwaeygruyaeygsfuaeisdgfaksdjfgkasdjgfksdjagfksjadhfgewuygfjksdhbfuaegsyfajkhsgfuywegfbjkhsaegrou8weybfkuwegr',
        height: 200,
        width: 300,
        scrollable:true,
        modal: {
            style: 'opacity: 0'
        },
        hideOnMaskTap:true,
        items: [
            {
                xtype: 'button',
                text: "Close".toUpperCase(),
                cls: 'button-orange',
                listeners: {
                    tap: function (button) {
                      overlay.hide();
                    }
                }
            }
        ]
    });
    Ext.Viewport.add(overlay);
    overlay.show();

}

});

Check this in browser!

How to enable scrollbar for this following overlay

1 Answers1