as requested here:


i try to implement the Animation from ContentPanel into a FieldSet
as requested here: Colapse animated on fieldset



PHP Code:
package com.mycompany.myapplication.client.gui.components;

import com.extjs.gxt.ui.client.Style.Direction;
import com.extjs.gxt.ui.client.core.El;
import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.FxEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.fx.FxConfig;
import com.extjs.gxt.ui.client.widget.form.FieldSet;
import com.google.gwt.user.client.Element;

/**
 *
 * @author GXT Team
 * @author anonym
 *
 * A container that wraps its content in a HTML fieldset and is animated
 *
 * <dl>
 * <dt><b>Events:</b></dt>
 *
 * <dd><b>BeforeExpand</b> : FieldSetEvent(fieldSet)<br>
 * <div>Fires before the panel is expanded. Listeners can cancel the action by
 * calling {@link BaseEvent#setCancelled(boolean)}.</div>
 * <ul>
 * <li>fieldSet : this</li>
 * </ul>
 * </dd>
 *
 * <dd><b>Expand</b> : FieldSetEvent(fieldSet)<br>
 * <div>Fires after the panel is expanded</div>
 * <ul>
 * <li>fieldSet : this</li>
 * </ul>
 * </dd>
 *
 * <dd><b>BeforeCollapse</b> : FieldSetEvent(fieldSet)<br>
 * <div>Fires before the panel is collpased. Listeners can cancel the action by
 * calling {@link BaseEvent#setCancelled(boolean)}.</div>
 * <ul>
 * <li>fieldSet : this</li>
 * </ul>
 * </dd>
 *
 * <dd><b>Collapse</b> : FieldSetEvent(fieldSet)<br>
 * <div>Fires after the panel is collapsed.</div>
 * <ul>
 * <li>fieldSet : this</li>
 * </ul>
 * </dd>
 * </dl>
 *
 * <dl>
 * <dt>Inherited Events:</dt>
 * <dd>LayoutContainer AfterLayout</dt>
 * <dd>ScrollContainer Scroll</dd>
 * <dd>Container BeforeAdd</dd>
 * <dd>Container Add</dd>
 * <dd>Container BeforeRemove</dd>
 * <dd>Container Remove</dd>
 * <dd>BoxComponent Move</dd>
 * <dd>BoxComponent Resize</dd>
 * <dd>Component Enable</dd>
 * <dd>Component Disable</dd>
 * <dd>Component BeforeHide</dd>
 * <dd>Component Hide</dd>
 * <dd>Component BeforeShow</dd>
 * <dd>Component Show</dd>
 * <dd>Component Attach</dd>
 * <dd>Component Detach</dd>
 * <dd>Component BeforeRender</dd>
 * <dd>Component Render</dd>
 * <dd>Component BrowserEvent</dd>
 * <dd>Component BeforeStateRestore</dd>
 * <dd>Component StateRestore</dd>
 * <dd>Component BeforeStateSave</dd>
 * <dd>Component SaveState</dd>
 * </dl>
 */
public class AnimatedFieldSet extends FieldSet {

    private 
boolean animating;
    private 
boolean animCollapse true;

    public 
AnimatedFieldSet() {
        
super();
    }

    
/**
     * Returns true if animation is enabled for expand / collapse.
     *
     * @return the animCollapse true for animations
     */
    
public boolean getAnimCollapse() {
        return 
animCollapse;
    }

    
/**
     * Sets whether expand and collapse is animating (defaults to true,
     * pre-render).
     *
     * @param animCollapse true to enable animations
     */
    
public void setAnimCollapse(boolean animCollapse) {
        
assertPreRender();
        
this.animCollapse animCollapse;
    }

    
/**
     * Collapses the fieldset.
     */
    
@Override
    
public void collapse() {
        if (
rendered) {
            if (
getCollapsible() && !getCollapsed() && !animating) {
                if (
fireEvent(Events.BeforeCollapse)) {
                    
onCollapse();
                }
            }
        } else {
            
setCollapsed(true);
        }
    }

    
/**
     * Expands the fieldset.
     */
    
@Override
    
public void expand() {
        if (
rendered) {
            if (
getCollapsible() && getCollapsed() && !animating) {
                if (
fireEvent(Events.BeforeExpand)) {
                    
onExpand();
                }
            }
        } else {
            
setCollapsed(false);
        }
    }

    @
Override
    
protected void onRender(Element parentint pos) {

        
// dont trigger the onCollapse() in Parent FieldSet
        // do it later here
        
boolean defaultCollapsed getCollapsed();
        
setCollapsed(false);
        
super.onRender(parentpos);
        
setCollapsed(defaultCollapsed);

        if (
getCollapsed()) {
            
boolean anim animCollapse;
            
setCollapsed(false);
            
setAnimCollapse(false);
            
collapse();
            
setAnimCollapse(anim);
        }

    }

    @
Override
    
protected void onCollapse() {
        if (
animCollapse && !animating) {
            
animating true;
            
addStyleName("x-panel-animated");
            
getBody().slideOut(Direction.UP, new FxConfig(300, new Listener<FxEvent>() {

                public 
void handleEvent(FxEvent fe) {
                    
animating false;
                    
removeStyleName("x-panel-animated");
                    
AnimatedFieldSet.super.onCollapse();
                }
            }));
        } else {
            
AnimatedFieldSet.super.onCollapse();
        }
    }

    @
Override
    
protected void onExpand() {
        if (
animCollapse && !animating) {
            
animating true;
            
addStyleName("x-panel-animated");
            
getBody().setVisible(true);
            
getBody().slideIn(Direction.DOWN, new FxConfig(300, new Listener<FxEvent>() {

                public 
void handleEvent(FxEvent fe) {
                    
animating false;
                    
removeStyleName("x-panel-animated");
                    
AnimatedFieldSet.super.onExpand();
                }
            }));
        } else {
            
AnimatedFieldSet.super.onExpand();
        }
    }

    private 
native void setCollapsed(boolean collapsed)/*-{
    this.@com.extjs.gxt.ui.client.widget.form.FieldSet::collapsed = collapsed;
    }-*/
;

    private 
native boolean getCollapsed()/*-{
    return this.@com.extjs.gxt.ui.client.widget.form.FieldSet::collapsed;
    }-*/
;

    private 
native boolean getCollapsible()/*-{
    return this.@com.extjs.gxt.ui.client.widget.form.FieldSet::collapsible;
    }-*/
;

    private 
native El getBody()/*-{
    return this.@com.extjs.gxt.ui.client.widget.form.FieldSet::body;
    }-*/
;