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

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

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

使用侦听器很容易做到，但这似乎是Ext js变量绑定的完美使用。但是，我似乎无法使其正常工作。

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

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

我在Ext js中缺少变量绑定吗？

解决方法

您不需要使用绑定。 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",width: 400,margin: 5
    }]
});