隐藏面板可滚动静止内容

Question

我想要一个带有顶部和底部堆叠工具栏的模式窗口，并且中间面板中的所有内容都应该可滚动且可见。 但是，当我这样做时，即使面板是可滚动的：“垂直”，但它只在被拖动时滚动，只要鼠标上移，它就会滚动回原来的位置。由于这个问题，旋转木马下面的长文本只有在拉起面板时才可见。如何让这个面板可以像滚动列表一样停止滚动而不是返回顶部。

这里是我加载的观点：

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); 
    } 
}); 

我使用煎茶触摸2.1

Answer 1

我得到了这个问题，通过在初始化函数变化minWidth &解决了minHeight：

me.setMinWidth(myparent.element.dom.offsetWidth); 
me.setMinHeight(myparent.element.dom.offsetHeight - 88); 

其中myparent是父容器。

Answer 2

你的编码技术是不正确的。仅为UI创建View类并在Controller类中添加控制器方法。

我认为你面临的问题导致中间面板扩展到工具栏下方。尝试为顶部和底部的工具栏添加高度。