首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

gxt-创造最简单的tree(一)

2012-11-16 
gxt-创建最简单的tree(一)先上效果图:?上面的效果图比较简单粗糙,但已经具备了tree的基本特征了,有唯一的

gxt-创建最简单的tree(一)

先上效果图:


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;}}
?

?

?

?

?

?

热点排行