0

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/

Community
  • 1
  • 1
ASP
  • 773
  • 1
  • 8
  • 22
  • I think the problem may be that you are expecting resizing behavior when in reality if you add autoscroll, you will get a scrolling window inside a fixed window. I spent sometime thinking about this and I'm not sure how to do what you want. maybe a viewport? – Peter Kellner Mar 17 '14 at 15:25
  • Thanks Peter, for the input! I'm one step closer by using `updateLayout()` after setting the value. There is still a little layout problem with the grid running into overflow. – ASP Mar 17 '14 at 17:20
  • You might want to post on the extjs forums also. since it's been up here for a few days with no response, I think that's a reasonable thing to do. Post a link to your question and I'll follow it there and if no answer try to get some attention to it. – Peter Kellner Mar 17 '14 at 18:00

1 Answers1

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!

ASP
  • 773
  • 1
  • 8
  • 22