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

[JamesC]

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.namespace("Ext.ux.form");

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) {
fieldSet.setHeight(h);
}
}
}
});
}, this);
fieldSet.on("collapse", function() {
fieldSet.getEl().setStyle("height", null);
}, this);
}
});

[mystix]

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:
http://extjs.com/forum/showthread.php?t=77575

[JamesC]

Good point about the plugin - I've turned it into a plugin and updated the code in the original post.

[mystix]

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.

[JamesC]

Yea - it's just I haven't tried it with anything other than a fieldset!

[iqdk]

Hello,

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?

Thanks.