ExtJs 4.1 min 宽度和对齐“拉伸”不能一起工作

Posted 2023-02-26

【中文标题】ExtJs 4.1 min 宽度和对齐“拉伸”不能一起工作

【英文标题】：ExtJs 4.1 minWidth and align "stretch" not working togather

【发布时间】：2015-07-24 12:37:42

【问题描述】：

我有这个代码（https://fiddle.sencha.com/#fiddle/r38）：

Ext.onReady(function () 
        Ext.create("Ext.panel.Panel", 
            renderTo: Ext.getBody(),
            height: 200,
            autoScroll: true,
            items: [
                layout: 
                    type: "vbox",
                    align: "stretch"
                ,
                minWidth: 400
            
            ],
            layout: 
                type: "vbox",
                align: "stretch"
            
        );
    );

如果窗口大小小于 minWidth，即 400px，我需要显示水平滚动条。但它没有显示。我正在寻找通用解决方案，就实际项目而言，我有更复杂的树结构。

【问题讨论】：

你的意思是'minHeight'吗？如果高度变化而不是宽度变化，则应显示垂直滚动条。如果只有宽度变化，高度保持不变。

我的意思是水平滚动条。谢谢，

【参考方案1】：

尝试添加：

 flex: 1

在你的“物品”中

另加：

cls: 'my-panel'

为您的面板

然后尝试在你的 sass/css 样式中使用媒体查询：

@media only screen and (max-width: 400px)
   .my-panel
       overflow-x: scroll;
   

【讨论】：

有趣的想法，但主要问题：最初我的main 组件不是窗口-它是边框布局中的center 面板，我还有“西”面板，可以折叠.所以我不能依赖屏幕宽度。 :(

如果您在小提琴中有完整的布局会很好，添加面板标题会使其更具视觉效果，即使是一些虚拟项目也会有所帮助。我相信您需要处理调整大小事件才能使其完全正常工作，是的，正如您已经指出的那样，stretch 将占用任何可用空间并忽略 autoScroll 配置。