如何将面板的高度绑定到 Ext Js 中的视口高度？

Posted 2023-03-14

【中文标题】如何将面板的高度绑定到 Ext Js 中的视口高度？

【英文标题】：How to bind height of panel to viewport height in Ext Js?

【发布时间】：2020-08-25 23:30:18

【问题描述】：

我有兴趣在 Ext js 中自动将面板的高度设置为视口的高度。

使用监听器这很容易做到，但它似乎是对 Ext js 变量绑定的完美使用。但是，我似乎无法让它工作。

在我的主视图中，我的绑定配置是bind: height: 'viewportHeight'。在视图模型中，我有data: viewportHeight: Ext.getViewportHeight()。我用面板类的视图模型扩展了这个视图模型，并在视图中有bind: height: 'viewportHeight'。

我认为这就是 Ext js 中绑定的工作方式，但 viewportHeight 设置为初始视口高度，然后从未更新。调整窗口大小不会调整面板大小。

Ext js 中的变量绑定缺少什么？

【问题讨论】：

这实际上是您进行绑定的方式吗？如果是这样，绑定需要在变量周围使用花括号......否则，您只是绑定到一个字符串。所以应该是 bind: height: 'viewportHeight' 如果这只是描述中的一个错字，你介意给我们一个 Fiddle 来显示这个问题吗？

字符串中确实有大括号。有机会我会链接小提琴。

【参考方案1】：

您不需要使用绑定。 ExtJs 有用于这些目的的布局：

Ext.create('Ext.container.Viewport', 
    //layout: 'fit',
    layout: 
        type: 'hbox',
        align : 'stretch'
    ,
    items: [
        xtype: 'panel',
        title: "Sample Panel",
        html: "Content HTML",
        width: 200,
        margin: 5
    , 
        xtype: 'panel',
        title: "Another Panel",
        html: "Content HTML",
        width: 400,
        margin: 5
    ]
);

【讨论】：

这对我不起作用。我的视口是一个带有网格面板作为选项卡的选项卡面板。网格面板扩展到其行的高度，比屏幕大。我需要标签面板的卡片布局。网格是通过滚动设置的。

嗯，好的，那么在小提琴中有一个可重现的布局样本会很好：dle.sencha.com