1. #1
    Sencha User
    Join Date
    Nov 2007
    Posts
    243
    Vote Rating
    0
    JamesC is on a distinguished road

      0  

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

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


    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()]

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

  2. #2
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    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
    Last edited by mystix; 13 Aug 2009 at 7:32 PM. Reason: edit

  3. #3
    Sencha User
    Join Date
    Nov 2007
    Posts
    243
    Vote Rating
    0
    JamesC is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Nov 2007
    Posts
    243
    Vote Rating
    0
    JamesC is on a distinguished road

      0  

    Default


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

  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    25
    Vote Rating
    0
    iqdk is on a distinguished road

      0  

    Default


    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.
    Attached Images

Thread Participants: 2