开发者

Remove + (Plus sign) next to GWT Tree's Root Item

I wondered if anyone knew whether it was possible to remove the '+' Sign that appears next to the root item in a GWT Tree? I didn't see a CSS rule to handle it. Can one replace the + sign with say, a GIF?

(Adapted code from GWT manual below, for illustrative purposes)

TreeItem root = new TreeItem("root"); // Wish to remove + sign from next to thi开发者_运维百科s item

  root.addItem("item0");
  root.addItem("item1");
  root.addItem("item2");
  root.setState(true, true);
  // Add a CheckBox to the tree
  TreeItem item = new TreeItem(new CheckBox("item3"));
  root.addItem(item);

  Tree t = new Tree();
  t.addItem(root);

  // Add it to the root panel.
  RootPanel.get().add(t);


CSS styling does not apply to this at all. Rather, it requires using a different constructor for tree.. If you set spacer.png to a 1x1 transparent PNG it will remove the + signs. Here is the full code I used.

The correct way to do it is as follows:

public interface MyResources extends ClientBundle {
      public static final MyResources INSTANCE =  GWT.create(MyResources.class);

      @Source("spacer.png")
      public ImageResource leaf();


    }


public class TreeImagesExample implements Tree.Resources
{


    @Override
    public ImageResource treeClosed() {
        // TODO Auto-generated method stub
        return MyResources.INSTANCE.leaf();
    }

    @Override
    public ImageResource treeLeaf() {
        // TODO Auto-generated method stub
        return MyResources.INSTANCE.leaf();
    }

    @Override
    public ImageResource treeOpen() {
        // TODO Auto-generated method stub
        return MyResources.INSTANCE.leaf();
    }

} 

Main Function:
     TreeImagesExample tx= new TreeImagesExample();
                Tree t = new Tree(tx);
                t.addItem(root);

For this to work properly, we will also need a SelectionHandler, of course, so that we can register tree clicks on the tree items rather than the (now non-existent) + signs.


You'll have to use CSS to override the plus icon image, which is set as the background image of the item with a left-margin to move the text off of it.

The root item doesn't have its own specific style so you'll have to add a style name (i.e., CSS class) on the tree item yourself and remove the background image yourself, in CSS.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜