Automatic resizing of container panel containing custom ExtJS 4.2 form field?

Question

I have a custom field component based on Ext.form.field.Base. I got the big idea from this post. But what's bothering me with this solution is the fact, that it has a fixed height. What I would like to have instead is that the container grows in height as I add entries to the grid.

I have made an earlier attempt to make such a field but based on a Panel containing the grid and buttons. Putting this panel into a vbox layout and adding rows to the grid perfectly resized the container form panel. What did I miss to implement that the container would resize?

Here is a fiddle where you should easily see what I mean: http://jsfiddle.net/amx9j/

Answer 1

I finally got it working!

See this fiddle here: http://jsfiddle.net/amx9j/3/

This configuration for the form worked:

layout: {
    type: 'vbox',
    align: 'stretch'
},
items: [{
    xtype: 'container',
    layout: 'anchor',
    items: [{
        //custom fields that change their height
}]

And in the custom field you have to use this.updateLayout() everytime you expect the height to change. In addition I had to implement the onResize method:

onResize: function(w, h) {
    this.callParent(arguments);
    this.grid.setWidth(w - this.getLabelWidth());
}

Important thing is, to NOT set the height of the grid ;-)

Thanks @Peter for taking the time to look into this!