Top Button on bottom of FieldSet

[eldono]

Hi!
Don't know if it's been already posted, but here is a quick&dirty way to add a "Top" button on the bottom-right of a fieldset, which scrolls the page to the top (of course you can change the behaviour).

Ext.override(Ext.form.FieldSet, {
   createLegendCt : function() {
     var legend = this.callParent();
     if (this.showTopButton){
       legend.items.push(this.createTopButton());
     }
     return legend;
   },
   createTopButton : function() {
     var me = this;
     this.topButton = Ext.widget({
       xtype : 'tool',
       type : 'up',
       handler : function() {
         scroll(0, 0);
       },
       id : me.id + '-legendTop',
       scope : me
     });
     this.topButtonCt = Ext.widget({
       xtype: 'container',
       layout: 'hbox',
       hidden: !!this.collapsed,
       width: 46,
       style: {
         position: 'absolute',
         right: 10,
         bottom: -7,
         background: 'white',
         padding: '0px 3px 0px 3px'
       },
       items: [this.topButton, {
         xtype: 'box',
         html: 'Top',
         width: 20
       }]
     });
     this.addListener('collapse', function(){
       this.topButtonCt.hide();
     }, this);
     this.addListener('expand', function(){
       this.topButtonCt.show();
     }, this);
     
     return this.topButtonCt;
   }
 });

Usage:

{
 xtype: 'fieldset',
 items: [...]
 showTopButton : true
 ...
}

Hope it helps.

[scottmartin]

Thanks for the tip. Someone may find it helpful.

Scott.

[talha06]

thanks for sharing, great idea for advanced field sets..