gxt-创造最简单的tree（一）

先上效果图：

?

上面的效果图比较简单粗糙，但已经具备了tree的基本特征了，有唯一的根节点、子节点、叶子。接下来还是对其继续完善，比如给叶子节点添加图标，更换默认的显示图标等，使其看起来比较美观；

废话少说，还是贴上代码，若有不对的地方，麻烦各位大侠指点下:)

ps:本人做了chm格式的API，在附件上，方便搜索方法或类名；

?

?

package com.jpkj.test.client;

import com.extjs.gxt.ui.client.data.BaseTreeModel;
import com.extjs.gxt.ui.client.data.TreeModel;
import com.extjs.gxt.ui.client.store.TreeStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Layout;
import com.extjs.gxt.ui.client.widget.layout.AnchorLayout;
import com.extjs.gxt.ui.client.widget.treepanel.TreePanel;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

/**
 * 创建一颗简单的树
 */
public class Gxt01 implements EntryPoint {


	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		@SuppressWarnings("unused")  
	    Layout junk = new AnchorLayout();
		RootPanel.get().add(getTreePanel());
		
	}
	
	/**
	 * 创建带有tree的ContentPanel
	 * @return ContentPanel
	 */
	private ContentPanel getTreePanel(){
		
		ContentPanel contentPanel = new ContentPanel();//构建一个内容面板
		contentPanel.setSize(600, 500);       //设置面板的宽和高
		
		
		TreeStore<TreeModel> store = new TreeStore<TreeModel>();
		store.add(getTreeModel(), true);
		TreePanel<TreeModel> treePanel = new TreePanel<TreeModel>(store);
		treePanel.setSize(200, 500);
		//关键，不然页面显示没有内容，通过name获得name对应的value
		treePanel.setDisplayProperty("name");
		//把treePanel添加到contentPanel上
		contentPanel.add(treePanel);
		return contentPanel;
	}
	
	/**
	 * 模拟tree显示的数据，数据存储到store里面，然后treePanel通过store获得里面的数据来
	 * 显示tree的信息
	 * 注意：为了显示中午不出乱码，项目和html的编码统一用UTF-8
	 */
	private TreeModel getTreeModel(){
		
		TreeModel root=new BaseTreeModel();//TreeModel是接口，这里用多态实例化
		root.set("name","根节点");//设置根节点名称
		
		//创建4个子节点
		TreeModel child1 = new BaseTreeModel();
		child1.set("name", "子节点1");
		
		TreeModel child2 = new BaseTreeModel();
		child2.set("name", "子节点2");
		
		TreeModel child3 = new BaseTreeModel();
		child3.set("name", "子节点3");
		
		TreeModel child4 = new BaseTreeModel();
		child4.set("name", "子节点4");
		
		//把子节点和父节点关联起来
		root.add(child1);
		root.add(child2);
		root.add(child3);
		root.add(child4);
		
		child1.setParent(root);
		child2.setParent(root);
		child3.setParent(root);
		child4.setParent(root);
		
		//创建第三次节点
		TreeModel child11 = new BaseTreeModel();
		child11.set("name", "子节点11");
		
		TreeModel child21 = new BaseTreeModel();
		child21.set("name", "子节点21");
		
		//把子节点和父节点关联起来
		child1.add(child11);
		child2.add(child21);
		
		child11.setParent(child1);
		child21.setParent(child2);
		
		
		return root;
		
	}
	
}

?

?

?

?

?