PDA

View Full Version : Gxt.ux AnimatedFieldSet



Arno.Nyhm
28 Sep 2009, 8:30 AM
as requested here:


i try to implement the Animation from ContentPanel into a FieldSet
as requested here: Colapse animated on fieldset (http://www.extjs.com/forum/showthread.php?p=391486#post391486)





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 parent, int pos) {

// dont trigger the onCollapse() in Parent FieldSet
// do it later here
boolean defaultCollapsed = getCollapsed();
setCollapsed(false);
super.onRender(parent, pos);
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;
}-*/;
}