View Full Version : [3.0] Ext.ux.form.ResizableFieldSet - ability to drag to increase height of fieldset

13 Aug 2009, 11:01 AM
Just finished successful upgrade to 3.0 and thought I'd share a few extensions. This first one is very simple - just gives you a resizable drag bar on the south portion of a fieldset allowing you to increase/decrease it's height. I had a grid inside my fieldset so this allows more/less rows in the grid to be viewed at the same time (grid will auto size if you're using a fit/border layout within your fieldset).

Edit: I have turned this into a plugin, usage - plugins: [new Ext.ux.form.ResizableFieldSet()]


Ext.ux.form.ResizableFieldSet = Ext.extend(Ext.util.Observable, {
init: function(fieldSet) {
// apply resizer to south only (after render)
fieldSet.on("afterrender", function() {
this.resizable = new Ext.Resizable(fieldSet.id, {
handles: "s",
listeners: {
resize: {
fn: function(r, w, h) {
}, this);
fieldSet.on("collapse", function() {
fieldSet.getEl().setStyle("height", null);
}, this);

13 Aug 2009, 7:18 PM
why not hoist this up to Ext.Panel instead? :-?

with that in place, even your Grid sitting inside your Fieldset can be easily resized.

scratch that. i was thinking of a plugin.

that, plus i just saw this:

14 Aug 2009, 12:30 AM
Good point about the plugin - I've turned it into a plugin and updated the code in the original post.

14 Aug 2009, 12:38 AM
ooh. nice.

might be better to rename it to Ext.ux.plugin.ResizablePanel though (and change the init() signature to init:function(panel) instead), since you can now drop this plugin into any Panel / subclass thereof.

14 Aug 2009, 1:45 AM
Yea - it's just I haven't tried it with anything other than a fieldset!

2 Apr 2010, 1:36 PM

I tried this plugin today and seeing something strange. Please see the attached screenshot - the "resize" line goes in the middle of the fieldset, not across the bottom border.
Is that expected?