Friday, April 11, 2008

ExtJs: Fixing shadow on auto resize Window on FieldSet open/collapse

I have been hunting the solution to auto resize Window on the collapse and open of a FieldSet contained within. It is very simple actually but there is a catch. Lets start with the usual Window and a FormPanel. The FormPanel will have few fields and a FieldSet with few more fields. See screenshot. Simple enough, and here is the code:
      
           form = new Ext.FormPanel({
               labelWidth: 75, // label settings here cascade unless overridden
               url:'save-form.php',
               frame:true,
               bodyStyle:'padding:5px 5px 0',
               width: 350,
               autoHeight:true,
               defaults: {width: 240},
               defaultType: 'textfield',
           items :[{
                   fieldLabel: 'Full Name',
                   name: 'fullname',
                   allowBlank:false
               },{
                   fieldLabel: 'Company',
                   name: 'company'
       },{
           xtype:'fieldset',
           id:'formfieldset',
           title: 'Contact',
           collapsible: true,
           autoWidth:true,
           autoHeight:true,
           defaults: {width: 220},
           defaultType: 'textfield',
           items :[{
                   fieldLabel: 'Email',
                   name: 'email'
               },{
                   fieldLabel: 'Phone No#',
                   name: 'mobile'
               }
           ]
           }]
       });

           win = new Ext.Window({
               layout:'fit',
               width:360,
              // height:300,
               autoHeight:true,
               closeAction:'hide',
               plain: true,
               items:form,
               buttons: [{
                   text:'Submit',
                   disabled:true
               },{
                   text: 'Close',
                   handler: function(){
                       win.hide();
                   }
               }]
           });
On clicking the FieldSet toggle button, the FormPanel would collapse nicely together with the Window. Note the autoHeight:true configuration for the Window, FormPanel and FieldSet. But the catch is the Window's shadow will not be auto resize. See the below screenshot: We are expecting to see the FieldSet fold nicely and the Window auto resize together with the FormPanel. As discussed on this thread this problem could be fixed by attaching to the resize event and call Window.syncShadow();

Looking into Panel.js code, toggling the FieldSet doesn't seem to trigger the resize event at all. So we would have to watch for the FieldSet collapse event instead. See the below code for the final fix.
        Ext.getCmp('formfieldset').on("collapse", function() {
          console.log("[fieldset] resize -- sync");
          win.syncShadow();
      }, this)


Btw, have you guys heard about this book to create your own programming language? Less than 1000 pages and that's what the CoffeeScript guy uses (or inspired from) to create CoffeeScript. I'm reading it. It's cool, and you should check it out -- create your own language, for bragging rights or whatever.
 

11 comments:

Anonymous said...

Thanks, that was very helpful for me.

Teddy A Jasin said...

Thanks mate... was looking for this...
i think its not in the API docs as well...

Sudden Def said...
This comment has been removed by the author.
Anonymous said...

thanks.. reading this found the solution to my problem.

Anonymous said...

REALLY helpfull for me too!
Lary

Chris said...

Had a very similar problem with a window containing a grid that needs to reload its store every time the window is shown. Every time the number of items in the store changed, the window would automatically resize to accommodate this, however, the shadow stayed the same.
Just added win.syncShadow() to the store's "load" event listener, works perfectly! Thanks for posting this.

JasonB said...

Just needed this myself and found it again via Google. Thanks!

buy viagra said...
This comment has been removed by a blog administrator.
cmygeHm said...

спасибо. долго искал как решить проблему!
Thank you! I have wasted many time to solve this trouble!

Anonymous said...

Very useful.
Thanks for sharing...

viagra said...

That is very good comment you shared.Thank you so much that for you shared those things with us.Im wishing you to carry on with ur achivments.All the best.