Question

I want to have a modal window with top and bottom stacked toolbars and all the content in middle panel should be scrollable and visible.
But when I am doing that, even though the panel is scrollable : ‘vertical’ but it only scrolls when it is dragged, as soon as mouse is up it scrolls back to original position. Because of this problem the long text below carousel is only visible when I pull up the panel. How to makes this panel simply scrollable like a list which stops scrolling when released instead of going back to top.

Here is the view which I am loading:

Ext.define('myshop.view.StyleDetails', {
    extend : 'Ext.Panel',
    requires : [ 'Ext.Toolbar', 'Ext.carousel.Carousel', 'Ext.Img', ],
    alias : 'widget.styledetailsview',
    xtype : 'styledetail',
    config : {
        modal : true,
        id : 'fullDetails',
        cls : 'detailsBox',
        width : 300, // Some dummy values
        height : 200, // Some dummy values
        hideOnMaskTap : true,
        title : 'Details',
        styleHtmlContent : true,
        rec : '', // Record
        tid : '', // templateId
        items : []
    },
    initialize : function() {
        var me = this;
        var info = me.config.rec;
        var hccontainer = Ext.getCmp('hccontainer');
        me.add([
                {
                    xtype : 'toolbar',
                    docked : 'top',
                    id : 'detailsTopToolbar',
                    title : info.styleProperties.title,
                    items : [ {
                        xtype : 'button',
                        ui : 'decline-round',
                        text : 'X',
                        docked : 'right',
                        listeners : {
                            tap : {
                                fn : function(e, html, obj, c) {
                                    this.parent.parent.closeWindow();
                                }
                            }
                        }
                    } ]
                },
                {
                    xtype : 'panel',
                    layout : 'vbox',
                    inline: {
                        wrap: false
                    },
                    scrollable : 'vertical',
                    items : [{
                        xtype : 'carousel',
                        directionLock : true,
                        flex : 3,
                        cls : 'pdp imgs',
                        config : {
                            direction : 'horizontal',
                            id : 'det'
                        }
                    },
                    {
                        xtype : 'panel',
                        layout : 'vbox',
                        flex : 1,
                        items : [ {
                            xtype : 'panel',
                            id : 'detailsPrice',
                            cls : 'pdp price',
                            html : 'Rs. ' + info.price
                        }, {
                            xtype : 'panel',
                            id : 'detailsSizes',
                            cls : 'pdp sizes',
                            html : 'Available Sizes: ' + info.available_sizes
                        }, {
                            xtype : 'panel',
                            id : 'desc',
                            cls : 'pdp desc',
                            html : ''
                        } ]
                    }]
                },
                {
                    xtype : 'button',
                    ui : 'confirm',
                    text : 'Buy Now',
                    docked : 'bottom',
                    listeners : {
                        tap : {
                            fn : function(e, html, obj, c) {
                                window.open('www.website.com'+ '?ref=jd');
                            }
                        }
                    }
                } ]);
        var detCarousel = Ext.getCmp("det");
        var imgs = [];
        if (!Ext.isEmpty(info.styleProperties.backImageUrl)) {
            imgs.push({
                xtype : 'image',
                src : info.styleProperties.backImageUrl
            });
        }
        if (!Ext.isEmpty(info.styleProperties.bottomImageUrl)) {
            imgs.push({
                xtype : 'image',
                src : info.styleProperties.bottomImageUrl
            });
        }
        if (!Ext.isEmpty(info.styleProperties.defaultImageUrl)) {
            imgs.push({
                xtype : 'image',
                src : info.styleProperties.defaultImageUrl
            });
        }
        if (!Ext.isEmpty(info.styleProperties.frontImageUrl)) {
            imgs.push({
                xtype : 'image',
                src : info.styleProperties.frontImageUrl
            });
        }
        if (!Ext.isEmpty(info.styleProperties.leftImageUrl)) {
            imgs.push({
                xtype : 'image',
                src : info.styleProperties.leftImageUrl
            });
        }
        if (!Ext.isEmpty(info.styleProperties.rightImageUrl)) {
            imgs.push({
                xtype : 'image',
                src : info.styleProperties.rightImageUrl
            });
        }
        if (!Ext.isEmpty(info.styleProperties.topImageUrl)) {
            imgs.push({
                xtype : 'image',
                src : info.styleProperties.topImageUrl
            });
        }
        detCarousel.setItems(imgs);
        // Rendering sizes
        var sizeOptions = info.productOptions;
        var html = "Available Sizes : ";
        for ( var i = 0; i < sizeOptions.length; i++) {
            if (sizeOptions[i].active && sizeOptions[i].available) {
                html = html + sizeOptions[i].unifiedSize + ', ';
            }
        }
        html = Ext.String.trim(html);
        html = html.substring(0, html.length - 1);
        html = html + ' (<a href="' + info.sizeChartImage
                + '" target="_blank">Size Chart</a>' + ')';
        Ext.getCmp("detailsSizes").setHtml(html);

        // Rendering Description
        Ext.getCmp("desc").setHtml(info.description);

        me.setMinWidth(hccontainer.element.dom.offsetWidth);
        me.setMinHeight(hccontainer.element.dom.offsetHeight - 88);
        this.callParent(arguments);
    },
    closeWindow : function() {
        console.log("closing");
        this.hide('slideOut');
        Ext.defer(function(){ 
            Ext.getCmp("fullDetails").destroy();
        }, 500, this);
    }
});

I am using Sencha Touch 2.1

Answer 1

I got this problem solved by changing minWidth & minHeight in initialize function:

me.setMinWidth(myparent.element.dom.offsetWidth);
me.setMinHeight(myparent.element.dom.offsetHeight - 88);

where myparent is the parent container.