【发布时间】：2012-12-10 07:31:48
【问题描述】：
我想要一个带有顶部和底部堆叠工具栏的模态窗口，并且中间面板中的所有内容都应该是可滚动且可见的。 但是当我这样做时，即使面板是可滚动的：“垂直”，但它只会在拖动时滚动，只要鼠标向上，它就会滚动回原始位置。由于这个问题，旋转木马下面的长文本只有在我拉起面板时才可见。如何使这个面板像列表一样简单地滚动，当释放时停止滚动而不是返回顶部。
这是我正在加载的视图：
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);
}
});
我正在使用 Sencha Touch 2.1
【问题讨论】：
标签： scroll sencha-touch sencha-touch-2