Question

我在Sencha Touch中有以下视图。该视图会创建一个弹出框，当单击底部工具栏中的按钮时，该弹出框将从右侧显示：

Ext.define('TheApp.view.PopupTablet',{  
 extend: 'Ext.form.Panel',  
    xtype: 'popupbox',  
    config:{  
        itemId: 'popbox',  
        floating: true,  
        centered: true,  
        modal: true,  
        layout: {
            type: 'vbox'
        },
        id: 'popup',  
        showAnimation: { type: 'slide', direction: 'left'},  
        styleHtmlContent: true,  
        html: 'Please select',  
        items:[{  
            xtype: 'button',  
            action: 'hide',  
            text: 'Close',  
            ui: 'confirm',  
            docked: 'bottom',  
        }]  
    }  
});

在控制器中，我有以下代码，它创建了弹出窗口，将其添加到视口，然后在“显示”它之前添加其内容：

showPopup: function(){  
         var popup = this.getPopup();  
          Ext.Viewport.add(popup); 
          Ext.getCmp('popup').add(siteButts); 
          popup.show();  
      },

现在，这一切都按要求运作。内容包含在名为siteButts的数组中，该数组在不同的脚本中创建。这个位工作正常。

我遇到问题的地方是我需要弹出框高度以扩展内容。我试过不设置高度，我试过了：

#popup{
    height: auto;
}

但也没有诀窍 - 实际上，两者似乎都在崩溃容器。

如果我将高度设置为固定值（例如height: 10em），则会将高度设置为指定值。但是，由于我们无法确定内容中使用的数据量，因此我需要具有伸展的高度。

我希望整个内容可见，弹出窗口中没有滚动条

建议非常欢迎。

Answer 1

如果配置属性“可滚动”设置为false，则可以执行此操作。并使用以下css代码

#popup .x-scroll-scroller,#popup .x-scroll-container{
position:relative;
}

sencha touch：容器高度需要适合内容

1 个答案: