我有一个水平滚动面板（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;}
我曾尝试更改minWidthsearchPanel，但这也没有用。