Accordion Layout Example (Ext GWT) : Accordion Panel « GWT « Java






Accordion Layout Example (Ext GWT)

Accordion Layout Example (Ext GWT)
 


/*
 * Ext GWT - Ext for GWT
 * Copyright(c) 2007-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
 
 
 
package com.google.gwt.sample.hello.client;

import com.extjs.gxt.ui.client.data.BaseModelData;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.ModelIconProvider;
import com.extjs.gxt.ui.client.store.TreeStore;
import com.extjs.gxt.ui.client.util.IconHelper;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.layout.AccordionLayout;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.treepanel.TreePanel;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.AbstractImagePrototype;
import com.google.gwt.user.client.ui.RootPanel;

public class Hello implements EntryPoint {

  public void onModuleLoad() {
    //setLayout(new FlowLayout(10));

    ContentPanel panel = new ContentPanel();
    panel.setHeading("AccordionLayout");
    panel.setBodyBorder(false);

    panel.setLayout(new AccordionLayout());
    //panel.setIcon(Resources.ICONS.accordion());

    ContentPanel cp = new ContentPanel();
    cp.setAnimCollapse(false);
    cp.setHeading("Online Users");
    cp.setLayout(new FitLayout());
    panel.add(cp);

    TreeStore<ModelData> store = new TreeStore<ModelData>();
    TreePanel<ModelData> tree = new TreePanel<ModelData>(store);
    tree.setIconProvider(new ModelIconProvider<ModelData>() {

      public AbstractImagePrototype getIcon(ModelData model) {
        if (model.get("icon") != null) {
          return IconHelper.createStyle((String) model.get("icon"));
        } else {
          return null;
        }
      }

    });
    tree.setDisplayProperty("name");

    ModelData m = newItem("Family", null);
    store.add(m, false);

    store.add(m, newItem("Darrell", "user"), false);
    store.add(m, newItem("Maro", "user-girl"), false);
    store.add(m, newItem("Lia", "user-kid"), false);
    store.add(m, newItem("Alec", "user-kid"), false);
    store.add(m, newItem("Andrew", "user-kid"), false);
    tree.setExpanded(m, true);

    m = newItem("Friends", null);
    store.add(m, false);

    store.add(m, newItem("Bob", "user"), false);
    store.add(m, newItem("Mary", "user-girl"), false);
    store.add(m, newItem("Sally", "user-girl"), false);
    store.add(m, newItem("Jack", "user"), false);

    tree.setExpanded(m, true);

    cp.add(tree);

    cp = new ContentPanel();
    cp.setAnimCollapse(false);
    cp.setBodyStyleName("pad-text");
    cp.setHeading("Settings");
    cp.addText("DUMMY_TEXT_SHORT");
    panel.add(cp);

    cp = new ContentPanel();
    cp.setAnimCollapse(false);
    cp.setBodyStyleName("pad-text");
    cp.setHeading("Stuff");
    cp.addText("DUMMY_TEXT_SHORT");
    panel.add(cp);

    cp = new ContentPanel();
    cp.setAnimCollapse(false);
    cp.setBodyStyleName("pad-text");
    cp.setHeading("More Stuff");
    cp.addText("DUMMY_TEXT_SHORT");
    panel.add(cp);
    panel.setSize(200, 325);

    RootPanel.get().add(panel);
  }

  private ModelData newItem(String text, String iconStyle) {
    ModelData m = new BaseModelData();
    m.set("name", text);
    m.set("icon", iconStyle);
    return m;
  }


}

   
  








Ext-GWT.zip( 4,297 k)

Related examples in the same category

1.Accordion Panel by SectionStack (Smart GWT)Accordion Panel by SectionStack (Smart GWT)
2.Sections Add/Remove Sample for accordion panel (Smart GWT)Sections Add/Remove Sample for accordion panel (Smart GWT)
3.Sections Custom Controls Sample for accordion panel (Smart GWT)Sections Custom Controls Sample for accordion panel (Smart GWT)
4.Sections Resize Sample for accordion panel (Smart GWT)Sections Resize Sample for accordion panel (Smart GWT)
5.Sections Show/Hide Sample for accordion panel (Smart GWT)Sections Show/Hide Sample for accordion panel (Smart GWT)
6.Build a tree and add to Accordion Layout (Ext GWT)Build a tree and add to Accordion Layout (Ext GWT)