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
