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?

Is that actually how you're doing the binding? If so, binding requires curly braces around the variable... otherwise, you're just binding to a string. So it should be bind: {height: '{viewportHeight}'} If that's just a typo in the description, would you mind giving us a Fiddle showing the issue? — incutonez
I did have braces in the string. I'll link a fiddle when I have a chance. — bbbbbb

Arthur Rubens Arthur Rubens · Accepted Answer · 2020-08-26T09:27:52

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

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

1 Answers