Scroll 面板可滚动的静止内容被隐藏

我想有一个模式窗口与顶部和底部堆叠工具栏和所有的内容在中间面板应该是滚动和可见的。 但当我这样做时，即使面板是可滚动的：“垂直”，但它只在拖动时滚动，一旦鼠标向上，它就会滚动回原始位置。由于这个问题，旋转木马下面的长文本只有在我拉起面板时才可见。如何使这个面板像列表一样简单地滚动，当它被释放时停止滚动，而不是返回顶部

以下是我正在加载的视图：

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);
    }
});

Ext.define（'myshop.view.StyleDetails'{
扩展：“Ext.Panel”，
需要：['Ext.Toolbar'，'Ext.carousel.carousel'，'Ext.Img'，]，
别名：“widget.styledetailsview”，
xtype:'styledetail'，
配置：{
莫代尔：是的，
id:'完整详细信息'，
cls:“详细信息框”，
宽度：300，//一些虚拟值
高度：200，//一些虚拟值
hideOnMaskTap：没错，
标题:"详情",，
styleHtmlContent:对，
记录：“”，//记录
tid:“”，//模板ID
项目：[]
},
初始化：函数（）{
var me=这个；
var info=me.config.rec；
var hccontainer=Ext.getCmp（'hccontainer'）；
我([
{
xtype:'工具栏'，
停靠：“顶部”，
id:“detailsTopToolbar”，
标题：info.styleProperties.title，
项目：[{
xtype:'按钮'，
ui:“拒绝回合”，
文本：“X”，
停靠：“对”，
听众：{
点击：{
fn：函数（e、html、obj、c）{
this.parent.parent.closeWindow（）；
}
}
}
} ]
},
{
xtype:'面板'，
布局：“vbox”，
内联：{
包装：假
},
可滚动：“垂直”，
项目：[{
xtype:'旋转木马'，
方向锁：对，
弹性：3，
cls:“pdp imgs”，
配置：{
方向：'水平'，
id:“det”
}
},
{
xtype:'面板'，
布局：“vbox”，
弹性：1，
项目：[{
xtype:'面板'，
id:'详细信息'，
cls:‘pdp价格’，
html:'Rs.+信息价格
}, {
xtype:'面板'，
id:'detailsSizes'，
cls:‘pdp尺寸’，
html:“可用尺寸：”+info.Available\u尺寸
}, {
xtype:'面板'，
id:'desc'，
cls:“pdp描述”，
html:'
} ]
}]
},
{
xtype:'按钮'，
ui:'确认'，
文字：“立即购买”，
停靠：“底部”，
听众：{
点击：{
fn：函数（e、html、obj、c）{
window.open（'www.website.com'+'？ref=jd'）；
}
}
}
} ]);
var detCarousel=Ext.getCmp（“det”）；
var-imgs=[]；
如果（！Ext.isEmpty（info.styleProperties.backImageUrl））{
推({
xtype:'图像'，
src:info.styleProperties.backImageUrl
});
}
如果（！Ext.isEmpty（info.styleProperties.bottomImageUrl））{
推({
xtype:'图像'，
src:info.styleProperties.bottomImageUrl
});
}
如果（！Ext.isEmpty（info.styleProperties.defaultImageUrl））{
推({
xtype:'图像'，
src:info.styleProperties.defaultImageUrl
});
}
如果（！Ext.isEmpty（info.styleProperties.frontImageUrl））{
推({
xtype:'图像'，
src:info.styleProperties.frontImageUrl
});
}
如果（！Ext.isEmpty（info.styleProperties.leftImageUrl））{
推({
xtype:'图像'，
src:info.styleProperties.leftImageUrl
});
}
如果（！Ext.isEmpty（info.styleProperties.rightmageurl））{
推({
xtype:'图像'，
src:info.styleProperties.rightImageUrl
});
}
如果（！Ext.isEmpty（info.styleProperties.topImageUrl））{
推({
xtype:'图像'，
src:info.styleProperties.topImageUrl
});
}
解转盘设置项目（imgs）；
//渲染大小
var sizeOptions=info.productOptions；
var html=“可用尺寸：”；
对于（变量i=0；ime.setMinWidth(myparent.element.dom.offsetWidth);
me.setMinHeight(myparent.element.dom.offsetHeight - 88);