PDA

View Full Version : accordion layout



paserrano
19 Nov 2009, 3:46 AM
Hi to all

I would like to work with an accordion layout which let me open to "tab" at the same time.

Is it possible?

thanks

Arno.Nyhm
19 Nov 2009, 3:58 AM
which let me open to "tab" at the same time.

can you explain what you mean with this?

paserrano
19 Nov 2009, 4:11 AM
ok, sorry for my brief explanation

when I am working with this component (accordion layout) I only can have one componente open...like this example:

http://www.extjs.com/examples/explorer.html#accordionlayout

when you click in one title, it open a tab, and close the others....my question is: could I open more than one "tab"?

Arno.Nyhm
19 Nov 2009, 4:47 AM
at first: please not bump your question!
duplicate thread from yesterday:
http://www.extjs.com/forum/showthread.php?t=85711&highlight=accordion

Arno.Nyhm
19 Nov 2009, 5:32 AM
i think you can do this also with a RowLayout. the header element of contentpanel have the only one additional css class: x-accordion-hd.

Arno.Nyhm
19 Nov 2009, 5:36 AM
one quick and dirty solution (but: i think thats not a good way) is just to disable the onBeforeExpand:


panel.setLayout(new AccordionLayout() {

@Override
protected void onBeforeExpand(ComponentEvent ce) {
// disable
// super.onBeforeExpand(ce);
}


});
but with this the height is not ok.

for the example you have to add a setAutoHeight(true) to the contentpanel and also in this example to some the subcontentpanels.



17313


my full example code:


copy from AccordionLayoutExample.java


/*
* Ext GWT - Ext for GWT
* Copyright(c) 2007-2009, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
package com.mycompany.myapplication.client.forumsnippets;

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.event.ComponentEvent;
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.LayoutContainer;
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.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.treepanel.TreePanel;
import com.google.gwt.user.client.ui.AbstractImagePrototype;

public class AccordionLayoutExample extends LayoutContainer {

public static String DUMMY_TEXT_SHORT = "Lorem Ipsum is simply dummy text of the "
+ "printing and typesetting industry. Lorem Ipsum has been the industry's standard "
+ "dummy text ever since the 1500s.";
public AccordionLayoutExample() {
setLayout(new FlowLayout(10));

final ContentPanel panel = new ContentPanel();
panel.setHeading("AccordionLayout");
panel.setBodyBorder(false);
panel.setAutoHeight(true); // <---- new

panel.setLayout(new AccordionLayout() { // <--- new
// <--- new
@Override // <--- new
protected void onBeforeExpand(ComponentEvent ce) { // <--- new
// disable it // <--- new
// super.onBeforeExpand(ce); // <--- new
} // <--- new
}); // <--- new
// panel.setIcon(Examples.ICONS.accordion());

ContentPanel cp = new ContentPanel();
cp.setHeading("Online Users");
cp.setAutoHeight(true); // <--- new

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.setBodyStyleName("pad-text");
cp.setHeading("Settings");
cp.addText(DUMMY_TEXT_SHORT);

panel.add(cp);

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

panel.add(cp);

cp = new ContentPanel();
cp.setBodyStyleName("pad-text");
cp.setHeading("More Stuff");
cp.addText(DUMMY_TEXT_SHORT);

panel.add(cp);
panel.setSize(200, 325);

add(panel);
}

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



import com.extjs.gxt.ui.client.widget.Window;

/**
*
* @author anonym
*/
public class AccordionLayoutExampleWindow extends Window {

public AccordionLayoutExampleWindow() {

add(new AccordionLayoutExample());
setHeight(800);

}
}

sven
19 Nov 2009, 5:55 AM
It would probably some nice addition to make this work. But how do you want the height to be? Should all expand be the same height, or should it be configurable? It would be quite easy to archieve.

Arno.Nyhm
19 Nov 2009, 6:02 AM
the best it would be configurable. also it needs to be configurabel whats going with the accordion panel: it should autoheight (like my example) or it have a fixed height and the subpanel autogrow to fill the place.

paserrano
19 Nov 2009, 10:32 AM
thanks Arno.Nyhm (http://www.extjs.com/forum/member.php?u=49348)

your solution maybe is dirty, but it works!