ストアが読み込まれるたびにパネルを押す水平スクロール パネル (2 行レイアウト) があります。パネルの数が 10 ～ 15 を超えると、それらは表示されなくなり、パネルはスクロールを開始しますが、コンテンツが実際に終了する前に停止します。さらに引っ張ると、非表示のコンテンツが表示されますが、離すとすぐにスクロールバックし、最後のいくつかのパネルが再び境界を超えます。
これが私の見解のコードです：
Ext.define('MyTabApp.view.CatalogList', {
extend: 'Ext.Panel',
alias : 'widget.cataloglist',
config: {
layout : 'fit',
id : 'catalogList',
style : 'background-color:#FFF',
store : null, // Placeholder for store
hash : null,
items : [{
xtype : 'toolbar',
id : 'seachbar',
docked : 'top',
title : 'Search results',
items : [{
xtype : 'button',
text : 'back',
ui : 'back'
},
{
xtype : 'button',
text : 'Filter',
},
{
xtype : 'button',
text : 'Sort',
id : 'sortBtn',
right : 0,
style : 'margin-top: 0.3em;'
}]
},
{
xtype : 'panel',
id : 'searchPanel',
layout : 'hbox',
// html : 'search results',
scrollable : {
direction : 'horizontal',
directionLock : true
}
}]
},
innerTpl : MyTabApp.app.getMulticolumnListTpl(),
updateData : function(records) {
if(records.length != 0) {
var innerTpl = this.innerTpl;
var data = [];
for(var i=0; i<records.length; i++){
data[i] = records[i].getData();
data[i].searchImage = Utils.updateImgResolution(records[i].getData().searchImage, "240_320");
}
var plist = [];
while(data.length){
plist.push({
xtype : 'panel',
layout : 'fit',
data : data.splice(0,10),
tpl : innerTpl
});
}
Ext.getCmp('searchPanel').add(plist);
}
Ext.getCmp('searchPanel').setMinWidth(5000);
/*
* Since removeData destroys all listeners so we need to bind it again
*/
this.bindTap();
},
removeData : function() {
Ext.getCmp('searchPanel').destroy();
this.add({
xtype : 'panel',
id : 'searchPanel',
layout : 'hbox',
scrollable : {
direction : 'horizontal',
directionLock : true
}
});
if(this.config.store != null){
this.config.store.destroy();
}
},
initialize : function() {
this.bindTap();
this.callParent();
},
bindTap : function() {
this.down('#searchPanel').element.on({
scope: this,
tap: 'onSearchTap'
});
},
onSearchTap : function(e) {
this.fireEvent("searchTapCmd", e);
}
});
新しいコンテンツが読み込まれるたびにストア呼び出しが呼び出されますupdateData。
テンプレートは次のとおりです。
getMulticolumnListTpl : function()
{
return new Ext.XTemplate(
'<div isdraggable="false" class="products">',
'<div isdraggable="false" class="row landscape">',
'<tpl for=".">',
'{% if (xindex % 2 === 1) { %}',
'<div isdraggable="false" class="product" ref="{id}">',
'<span style="float:right;"><img isdraggable="false" src="resources/icons/wishlist_temp.png" class="wishlist-icon"></img></span>',
'<div isdraggable="false" class="image" style="background-image:url({searchImage});"><!----></div>',
'<div isdraggable="false" class="name">{styleName}</div>',
'<div isdraggable="false" class="price">Rs. {discountedPrice}</div>',
'</div>',
'{% } %}',
'</tpl>',
'</div>',
'<div isdraggable="false" class="row landscape">',
'<tpl for=".">',
'{% if (xindex % 2 === 0) { %}',
'<div isdraggable="false" class="product" ref="{id}">',
'<span style="float:right;"><img isdraggable="false" src="resources/icons/wishlist_temp.png" style="width:24px; height:24px; opacity:0.5;"></img></span>',
'<div isdraggable="false" class="image" style="background-image:url({searchImage});"><!--<span style="float:right;"><img isdraggable="false" src="resources/icons/wishlist_temp.png" class="wishlist-icon"></img></span>--></div>',
'<div isdraggable="false" class="name">{styleName}</div>',
'<div isdraggable="false" class="price">Rs. {discountedPrice}</div>',
'</div>',
'{% } %}',
'</tpl>',
'</div>',
'</div>');
},
このテンプレートの CSS は次のとおりです。
.products .x-innerhtml{display:table;table-layout:fixed;width:100%;height:100%;border:1px solid #ccc;border-width:0 1px 1px 0}
.products .row{display:table-row}
.products .row>*{display:table-cell}
.products .row:last-child .product{border-bottom:0}
.products .product{background-size:80%;background-position:center;background-repeat:no-repeat;border-width:0 1px 1px 0;border-style:solid;border-color:#ddd;text-align:center}
.products .product .image{height: 240px;width: 180px;background-repeat:no-repeat;background-position:center center}
.products .product img{-webkit-border-radius:5px;border-radius:5px}
.products .product .name{width:100%;padding:20px 10px 5px 10px;color:black;font-size:16px;overflow:hidden;text-overflow:ellipsis; font-size: 60%}
.products .product .price{width:100%;font-size:12px;color:#d14747;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.products .landscape .product{width: 300px;padding: 5px;}
.products .landscape .product .image{margin-top:36px; margin: auto;}
.products .wishlist-icon {width:24px; height:24px; opacity:0.5;}
searchPanel の変更を試みminWidthましたが、それも機能しませんでした。