可滚动面板的一部分始终隐藏

Question

我有一个水平滚动面板（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但也没有工作。

Answer 1

虽然渲染HTML模板，煎茶触摸搅乱转换计算，并创建一个视那显示所有的项目比什么需要小。这可以通过创建所有呈现为如煎茶触摸部件父容器（而不是div S IN TPL Panel/Component）的一部分的部件是固定的，存在通过去除所述tpl。如果需要，您仍可以在这些单独的容器中使用tpl。