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

Question

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

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

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

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

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

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