How to bind height of panel to viewport height in Ext Js?

Question

I'm interested in automatically setting the height of a panel to the height of the viewport in Ext js.

Using listeners this is easy to do, but it seems to be a perfect use of Ext js variable binding. I can't seem to get it to work, however.

In my main view my bind config is, bind: {height: 'viewportHeight'}. In the view model, I have data: { viewportHeight: Ext.getViewportHeight()}. I extend this view model with the view model for my panel class, and have bind: {height: 'viewportHeight'} in the view.

I thought this was how bindings work in Ext js, but viewportHeight is set at the initial viewport height, and then never updated. Resizing the window does not resize the panel.

What am I missing with variable binding in Ext js?

Answer 1

You do not need to use binding. ExtJs has layouts for these purposes:

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