上部と下部に積み重ねられたツールバーを備えたモーダルウィンドウが必要です。中央のパネルのすべてのコンテンツはスクロール可能で表示されている必要があります。しかし、私がそれをしているとき、パネルはスクロール可能ですが：'垂直'ですが、ドラッグしたときにのみスクロールし、マウスを上げるとすぐに元の位置にスクロールして戻ります。この問題のため、カルーセルの下の長いテキストは、パネルを引き上げたときにのみ表示されます。このパネルを、トップに戻るのではなく、離すとスクロールを停止するリストのように単純にスクロール可能にする方法。
これが私がロードしているビューです：
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);
}
});
SenchaTouch2.1を使用しています