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对应的valuetreePanel.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;}}?
?
?
?
?
?