skhan
14 Jun 2008, 4:10 PM
I'm having some trouble with the context menus...
My application has a TreeTable and needs dynamic context menus that are based on the type of TreeTableItem clicked.
My solution was to create a context menu and then hide/show the menu items as necessary.
That lead to a couple of problems:
1) A hidden context menu still takes up space in the menu so that there is a rather large gap between menu items.
2) The width of the context menu is set the first time it is rendered. That causes some problems if on a subsequent call I try to show a menu item that is wider than the context menu's width.
Is there a way for me force the context menu to recalculate its dimensions to fit the unhidden menu item?
Here's a simple example illustrating the problem:
package com.test.client;
import java.io.Serializable;
import com.extjs.gxt.ui.client.data.BaseTreeModel;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.util.TreeBuilder;
import com.extjs.gxt.ui.client.widget.Text;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.button.ButtonBar;
import com.extjs.gxt.ui.client.widget.menu.Menu;
import com.extjs.gxt.ui.client.widget.menu.MenuItem;
import com.extjs.gxt.ui.client.widget.tree.Tree;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
@SuppressWarnings("unchecked")
public class GwtExtContextMenus implements EntryPoint {
public void onModuleLoad() {
RootPanel.get().add(new Text("TREE 1 - Hidden menus still taking up space"));
Tree firstTree = new Tree();
TreeBuilder.buildTree(firstTree, getTreeModel());
Menu menu = createMenu();
MenuItem item = (MenuItem) menu.getItemByItemId("item2");
item.hide();
item = (MenuItem) menu.getItemByItemId("item3");
item.hide();
firstTree.setContextMenu(menu);
RootPanel.get().add(firstTree);
RootPanel.get().add(new Text("TREE 2 - Menu item too long"));
Tree secondTree = new Tree();
TreeBuilder.buildTree(secondTree, getTreeModel());
final Menu newMenu = createMenu();
MenuItem item5 = new MenuItem("Item 5 with longer than normal text");
item5.setId("item5");
item5.hide();
newMenu.add(item5);
secondTree.setContextMenu(newMenu);
ButtonBar buttonBar = new ButtonBar();
buttonBar.add(new Button("Show oversized menu option",
new SelectionListener<ComponentEvent>() {
public void componentSelected(ComponentEvent ce) {
MenuItem longItem = (MenuItem) newMenu.getItemByItemId("item5");
longItem.show();
}
}));
buttonBar.add(new Button("Hide oversized menu option",
new SelectionListener<ComponentEvent>() {
public void componentSelected(ComponentEvent ce) {
MenuItem longItem = (MenuItem) newMenu.getItemByItemId("item5");
longItem.hide();
}
}));
RootPanel.get().add(secondTree);
RootPanel.get().add(buttonBar);
}
private Menu createMenu() {
Menu menu = new Menu();
MenuItem item1 = new MenuItem("Item 1");
item1.setId("item1");
MenuItem item2 = new MenuItem("Item 2");
item2.setId("item2");
MenuItem item3 = new MenuItem("Item 3");
item3.setId("item3");
MenuItem item4 = new MenuItem("Item 4");
item4.setId("item4");
menu.add(item1);
menu.add(item2);
menu.add(item3);
menu.add(item4);
return menu;
}
public static Folder getTreeModel() {
Folder[] folders = new Folder[] { new Folder("Beethoven", new Folder[] {
new Folder("Quartets"), new Folder("Sonatas"),
new Folder("Concertos"), new Folder("Symphonies"), }), };
Folder root = new Folder("root");
for (int i = 0; i < folders.length; i++) {
root.add((Folder) folders[i]);
}
return root;
}
private static class Folder extends BaseTreeModel implements Serializable {
private static final long serialVersionUID = 1L;
public Folder() {
}
public Folder(String name) {
set("name", name);
}
public Folder(String name, BaseTreeModel[] children) {
this(name);
for (int i = 0; i < children.length; i++) {
add(children[i]);
}
}
public String getName() {
return (String) get("name");
}
public String toString() {
return getName();
}
}
}
Tree 1 has two menu items hidden and you can see the gap they leave.
For Tree 2, first click on the tree to bring up the context menu then click the button "Show oversized menu option", then bring up the context menu again, you'll notice the text is cut off for the last option.
I'm using Beta 5 from the downloads section.
Any help here would be appreciated, thanks.
My application has a TreeTable and needs dynamic context menus that are based on the type of TreeTableItem clicked.
My solution was to create a context menu and then hide/show the menu items as necessary.
That lead to a couple of problems:
1) A hidden context menu still takes up space in the menu so that there is a rather large gap between menu items.
2) The width of the context menu is set the first time it is rendered. That causes some problems if on a subsequent call I try to show a menu item that is wider than the context menu's width.
Is there a way for me force the context menu to recalculate its dimensions to fit the unhidden menu item?
Here's a simple example illustrating the problem:
package com.test.client;
import java.io.Serializable;
import com.extjs.gxt.ui.client.data.BaseTreeModel;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.util.TreeBuilder;
import com.extjs.gxt.ui.client.widget.Text;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.button.ButtonBar;
import com.extjs.gxt.ui.client.widget.menu.Menu;
import com.extjs.gxt.ui.client.widget.menu.MenuItem;
import com.extjs.gxt.ui.client.widget.tree.Tree;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
@SuppressWarnings("unchecked")
public class GwtExtContextMenus implements EntryPoint {
public void onModuleLoad() {
RootPanel.get().add(new Text("TREE 1 - Hidden menus still taking up space"));
Tree firstTree = new Tree();
TreeBuilder.buildTree(firstTree, getTreeModel());
Menu menu = createMenu();
MenuItem item = (MenuItem) menu.getItemByItemId("item2");
item.hide();
item = (MenuItem) menu.getItemByItemId("item3");
item.hide();
firstTree.setContextMenu(menu);
RootPanel.get().add(firstTree);
RootPanel.get().add(new Text("TREE 2 - Menu item too long"));
Tree secondTree = new Tree();
TreeBuilder.buildTree(secondTree, getTreeModel());
final Menu newMenu = createMenu();
MenuItem item5 = new MenuItem("Item 5 with longer than normal text");
item5.setId("item5");
item5.hide();
newMenu.add(item5);
secondTree.setContextMenu(newMenu);
ButtonBar buttonBar = new ButtonBar();
buttonBar.add(new Button("Show oversized menu option",
new SelectionListener<ComponentEvent>() {
public void componentSelected(ComponentEvent ce) {
MenuItem longItem = (MenuItem) newMenu.getItemByItemId("item5");
longItem.show();
}
}));
buttonBar.add(new Button("Hide oversized menu option",
new SelectionListener<ComponentEvent>() {
public void componentSelected(ComponentEvent ce) {
MenuItem longItem = (MenuItem) newMenu.getItemByItemId("item5");
longItem.hide();
}
}));
RootPanel.get().add(secondTree);
RootPanel.get().add(buttonBar);
}
private Menu createMenu() {
Menu menu = new Menu();
MenuItem item1 = new MenuItem("Item 1");
item1.setId("item1");
MenuItem item2 = new MenuItem("Item 2");
item2.setId("item2");
MenuItem item3 = new MenuItem("Item 3");
item3.setId("item3");
MenuItem item4 = new MenuItem("Item 4");
item4.setId("item4");
menu.add(item1);
menu.add(item2);
menu.add(item3);
menu.add(item4);
return menu;
}
public static Folder getTreeModel() {
Folder[] folders = new Folder[] { new Folder("Beethoven", new Folder[] {
new Folder("Quartets"), new Folder("Sonatas"),
new Folder("Concertos"), new Folder("Symphonies"), }), };
Folder root = new Folder("root");
for (int i = 0; i < folders.length; i++) {
root.add((Folder) folders[i]);
}
return root;
}
private static class Folder extends BaseTreeModel implements Serializable {
private static final long serialVersionUID = 1L;
public Folder() {
}
public Folder(String name) {
set("name", name);
}
public Folder(String name, BaseTreeModel[] children) {
this(name);
for (int i = 0; i < children.length; i++) {
add(children[i]);
}
}
public String getName() {
return (String) get("name");
}
public String toString() {
return getName();
}
}
}
Tree 1 has two menu items hidden and you can see the gap they leave.
For Tree 2, first click on the tree to bring up the context menu then click the button "Show oversized menu option", then bring up the context menu again, you'll notice the text is cut off for the last option.
I'm using Beta 5 from the downloads section.
Any help here would be appreciated, thanks.