PDA

View Full Version : ListView for BaseTreeModel - How to achieve?



kmi1177
5 Jan 2011, 6:42 AM
Hi,
My requirement is to:
1. Have one content panel with one toggle button for GridView/ListView,
2. On click of Toggle button for GridView - show Model(extending BaseTreeModel) data into TreeGrid, (referred http://www.sencha.com/examples/explorer.html#basictreegrid)
3. Again on click of Toggle button for ListView - same items to be shown in ListView with the Tree Structure.

Could you please suggest how to achieve the Step-3 i.e. the ListView rendering with the same Model(extending BaseTreeModel) data.

Thanks in advance.

sven
5 Jan 2011, 12:41 PM
I dont really understand the question. ListView cannot render tree structures bz default. You need to have a custom template to support this. You can simple put your BaseTreeModel into a ListStore and it should work.

kmi1177
5 Jan 2011, 8:27 PM
My requirement is to show the Data(shown in TreeGrid) in ListView.
Regarding adding the BaseTreeModel to Store, I couldn't see any result with following approach:



ListStore<Folder> store1 = new ListStore<Folder>();
store1.add(model);
// (As per code of http://www.sencha.com/examples/explorer.html#basictreegrid Folder model = TestData.getTreeModel(); )

final ListView<Folder> view = new ListView<Folder>();
view.setTemplate(getTemplate());
view.setStore(store1);
view.setItemSelector("div.thumb-wrap");
view.setVisible(false);
cp.add(view);

final Button button = new Button("Test");
button.addSelectionListener(new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
// TODO Auto-generated method stub
if (tree.isVisible()) {
tree.setVisible(false);
view.setVisible(true);
} else {
tree.setVisible(true);
view.setVisible(false);
}

}
});

toolBar.add(type);
toolBar.add(button);
cp.setTopComponent(toolBar);
lc.add(cp);


private native String getTemplate() /*-{
return ['<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<span class="x-editable">{shortName}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'].join("");
}-*/;

** Also added private variable 'shortName' in Folder.java.

sven
5 Jan 2011, 10:58 PM
I need to see a fully working testcase implemening EntryPoint. There is not really a way to answer this without it

kmi1177
5 Jan 2011, 11:24 PM
Hereby posting the code, all the other dependent classes(Like Folder.java, Music.java, Resources.java etc) are used as used in example@ http://www.sencha.com/examples/explo...#basictreegrid (http://www.sencha.com/examples/explorer.html#basictreegrid) :




package com.training.extgwt.client;


import java.util.Arrays;


import com.extjs.gxt.ui.client.Style.HorizontalAlignment;

import com.extjs.gxt.ui.client.data.BeanModel;

import com.extjs.gxt.ui.client.data.ModelData;

import com.extjs.gxt.ui.client.event.ButtonEvent;

import com.extjs.gxt.ui.client.event.Events;

import com.extjs.gxt.ui.client.event.FieldEvent;

import com.extjs.gxt.ui.client.event.Listener;

import com.extjs.gxt.ui.client.event.SelectionListener;

import com.extjs.gxt.ui.client.store.ListStore;

import com.extjs.gxt.ui.client.store.TreeStore;

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

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

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

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

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

import com.extjs.gxt.ui.client.widget.button.Button;

import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;

import com.extjs.gxt.ui.client.widget.form.SimpleComboBox;

import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;

import com.extjs.gxt.ui.client.widget.grid.ColumnModel;

import com.extjs.gxt.ui.client.widget.grid.Grid;

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.toolbar.LabelToolItem;

import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;

import com.extjs.gxt.ui.client.widget.treegrid.CellTreeGridSelectionModel;

import com.extjs.gxt.ui.client.widget.treegrid.TreeGrid;

import com.extjs.gxt.ui.client.widget.treegrid.TreeGridCellRenderer;

import com.extjs.gxt.ui.client.widget.treegrid.TreeGridSelectionModel;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.user.client.ui.RootPanel;

import com.training.extgwt.shared.Folder;


/**
* Entry point classes define <code>onModuleLoad()</code>.
*/

public class TestGXT implements EntryPoint {


@Override

public void onModuleLoad() {
RootPanel.get().add(getTreeContentLayout());
}

public LayoutContainer getTreeContentLayout() {
LayoutContainer lc = new LayoutContainer();
lc.setLayout(new FlowLayout(10));

Folder model = TestData.getTreeModel();

TreeStore<ModelData> store = new TreeStore<ModelData>();
store.add(model.getChildren(), true);

ColumnConfig name = new ColumnConfig("name", "Name", 100);
name.setRenderer(new TreeGridCellRenderer<ModelData>());
ColumnConfig date = new ColumnConfig("author", "Author", 100);
ColumnConfig size = new ColumnConfig("genre", "Genre", 100);
ColumnModel cm = new ColumnModel(Arrays.asList(name, date, size));

ContentPanel cp = new ContentPanel();
cp.setBodyBorder(false);
cp.setHeading("TreeGrid");
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.setLayout(new FitLayout());
cp.setFrame(true);
cp.setSize(600, 300);

final TreeGrid<ModelData> tree = new TreeGrid<ModelData>(store, cm);
tree.setBorders(true);

tree.getStyle().setLeafIcon(Resources.ICONS.music());
tree.setAutoExpandColumn("name");
tree.setTrackMouseOver(false);
tree.getAriaSupport().setLabelledBy(cp.getHeader().getId() + "-label");
cp.add(tree);

ToolBar toolBar = new ToolBar();
toolBar.getAriaSupport().setLabel("TreeGrid Options");
toolBar.setBorders(true);
toolBar.add(new LabelToolItem("Selection Mode: "));

final SimpleComboBox<String> type = new SimpleComboBox<String>();
type.getAriaSupport().setLabelledBy(toolBar.getItem(0).getId());
type.setTriggerAction(TriggerAction.ALL);
type.setEditable(false);
type.setFireChangeEventOnSetValue(true);
type.setWidth(100);
type.add("Row");
type.add("Cell");
type.setSimpleValue("Row");
type.addListener(Events.Change, new Listener<FieldEvent>() {
public void handleEvent(FieldEvent be) {
boolean cell = type.getSimpleValue().equals("Cell");
tree.getSelectionModel().deselectAll();
if (cell) {
tree.setSelectionModel(new CellTreeGridSelectionModel<ModelData>());
} else {
tree.setSelectionModel(new TreeGridSelectionModel<ModelData>());
}
}
});

ListStore<Folder> store1 = new ListStore<Folder>();
store1.add(model);

/*
* final ListView<Folder> view = new ListView<Folder>() {
* @Override protected Folder prepareData(Folder model) { String s = model.get("name"); model.set("shortName", Format.ellipse(s, 15)); return model; } };
*/

final ListView<Folder> view = new ListView<Folder>();
view.setTemplate(getTemplate());
view.setStore(store1);
view.setItemSelector("div.thumb-wrap");
view.setVisible(false);
cp.add(view);

final Button button = new Button("Test");
button.addSelectionListener(new SelectionListener<ButtonEvent>() {

@Override

public void componentSelected(ButtonEvent ce) {
// TODO Auto-generated method stub

if (tree.isVisible()) {
tree.setVisible(false);
view.setVisible(true);
} else {
tree.setVisible(true);
view.setVisible(false);
}

}
});

toolBar.add(type);
toolBar.add(button);
cp.setTopComponent(toolBar);
lc.add(cp);
return lc;
}

private native String getTemplate() /*-{
return ['<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<span class="x-editable">{shortName}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'].join("");
}-*/;

}

kmi1177
6 Jan 2011, 5:18 PM
Sven,
Need your help..

sven
7 Jan 2011, 2:42 AM
class TestGXT implements EntryPoint {

public void onModuleLoad() {
RootPanel.get().add(getTreeContentLayout());
}

public LayoutContainer getTreeContentLayout() {
LayoutContainer lc = new LayoutContainer();
lc.setLayout(new FlowLayout(10));
Folder model = TestData.getTreeModel();
TreeStore<ModelData> store = new TreeStore<ModelData>();
store.add(model.getChildren(), true);
ColumnConfig name = new ColumnConfig("name", "Name", 100);
name.setRenderer(new TreeGridCellRenderer<ModelData>());
ColumnConfig date = new ColumnConfig("author", "Author", 100);
ColumnConfig size = new ColumnConfig("genre", "Genre", 100);
ColumnModel cm = new ColumnModel(Arrays.asList(name, date, size));
final ContentPanel cp = new ContentPanel();
cp.setBodyBorder(false);
cp.setHeading("TreeGrid");
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.setLayout(new CardLayout());
cp.setFrame(true);
cp.setSize(600, 300);
final TreeGrid<ModelData> tree = new TreeGrid<ModelData>(store, cm);
tree.setBorders(true);
tree.getStyle().setLeafIcon(Resources.ICONS.music());
tree.setAutoExpandColumn("name");
tree.setTrackMouseOver(false);
tree.getAriaSupport().setLabelledBy(cp.getHeader().getId() + "-label");
cp.add(tree);
ToolBar toolBar = new ToolBar();
toolBar.getAriaSupport().setLabel("TreeGrid Options");
toolBar.setBorders(true);
toolBar.add(new LabelToolItem("Selection Mode: "));
final SimpleComboBox<String> type = new SimpleComboBox<String>();
type.getAriaSupport().setLabelledBy(toolBar.getItem(0).getId());
type.setTriggerAction(TriggerAction.ALL);
type.setEditable(false);
type.setFireChangeEventOnSetValue(true);
type.setWidth(100);
type.add("Row");
type.add("Cell");
type.setSimpleValue("Row");
type.addListener(Events.Change, new Listener<FieldEvent>() {
public void handleEvent(FieldEvent be) {
boolean cell = type.getSimpleValue().equals("Cell");
tree.getSelectionModel().deselectAll();
if (cell) {
tree.setSelectionModel(new CellTreeGridSelectionModel<ModelData>());
} else {
tree.setSelectionModel(new TreeGridSelectionModel<ModelData>());
}
}
});
ListStore<ModelData> store1 = new ListStore<ModelData>();
store1.add(store.getAllItems()); /*
* * final ListView<Folder> view = new
* ListView<Folder>() { * @Override protected Folder
* prepareData(Folder model) { String s =
* model.get("name"); model.set("shortName",
* Format.ellipse(s, 15)); return model; } };
*/

final ListView<ModelData> view = new ListView<ModelData>();
view.setTemplate(getTemplate());
view.setStore(store1);
view.setItemSelector("div.thumb-wrap");
cp.add(view);
final Button button = new Button("Test");
button.addSelectionListener(new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) { // TODO Auto-generated
// method stub
CardLayout l = (CardLayout) cp.getLayout();

if (l.getActiveItem() == tree) {
l.setActiveItem(view);
} else {
l.setActiveItem(tree);
}
}
});
toolBar.add(type);
toolBar.add(button);
cp.setTopComponent(toolBar);
lc.add(cp);
return lc;
}

private native String getTemplate() /*-{
return ['<tpl for=".">', '<div class="thumb-wrap">', '<span class="x-editable">{name}</span></div>', '</tpl>', '<div class="x-clear"></div>'].join("");
}-*/;

}

A FitLayout only handles one child. Also your liststore did only contain one item

kmi1177
8 Jan 2011, 6:02 PM
Sven,
Thanks for your help. But, still I need some more help.
In Listview mode the Store items are not shown in order as they are in TreeGridview, also, can we show the same indent of Items as they are in TreeGrid.

sven
9 Jan 2011, 3:13 AM
As i said in my first reply, you needa custom template for this. ListView is based on a ListStore and so also does not support parent<->child relationships.

This means that you will need to save the indent in the model and the template needs to render it correctly.

kmi1177
9 Jan 2011, 3:19 AM
Got it.
Thanks Sven !!!

sven
9 Jan 2011, 3:36 AM
Why do you want to use a ListView? I dont understand this part. What are you trying to do exactly?

kmi1177
9 Jan 2011, 3:55 AM
Sven,
Trying to implement the approach we have with our normal content panels which show Grid and ListView and through ToggleButton we switch in between these 2 views.
I was surfing the probability work with BaseTreeModel and show data in TreeGrid and then use the same model to show in Iconic view(List View) with Templates in hierarchy as shown in TreeGrid.

sven
9 Jan 2011, 4:10 AM
So you dont want any columns, just one single column without header? Why not using TreePanel?