基于ExtJS和E3.Tree实现下拉树

基于ExtJS和E3.Tree实现下拉树 【关键词:E3.Tree ComboTree ExtJS 下拉树】 一、写在最前面 下拉树为下拉框和树形UI组件结合的一种高级UI现形式，可称其为ComboTree。在权限管理模块及其 他各种业务中都较为常见。此文就将结合ExtJs的Combobox组件和经过深度封装的E3.tree树形UI组件 一起实现这种下拉树。 二、实现步骤 第一步、扩展E3.Tree的AbstractWebTreeBuilder public class ComboExtTreeBuilder extends AbstractWebTreeBuilder{ //361行 //temp.append("${treeID}.render('${treeID}');").append(ENTER); } 第二步、使用扩展后的ComboExtTreeBuilder构造出树形UI public void generateComboMenuTree(HttpServletRequest request){ List nodeList = this.manageMenuResourceBpo.getMenuListByDto(new BaseDto()); //业务数据解码器，从业务数据中分解出id和parentid UserDataUncoder deptUncoder = new UserDataUncoder(){ public Object getID(Object menuData) throws UncodeException { MenuResourceDomain domain = (MenuResourceDomain)menuData; return domain.getMenuId(); } public Object getParentID(Object menuData) throws UncodeException { MenuResourceDomain domain = (MenuResourceDomain)menuData; return domain.getParentMenuId(); } }; //Tree模型构造器，用于生成树模型 AbstractWebTreeModelCreator treeModelCreator = new AbstractWebTreeModelCreator(){ //该方法负责将业务数据映射到树型节点 protected Node createNode(Object menuData, UserDataUncoder uncoder) { MenuResourceDomain domain = (MenuResourceDomain)menuData; WebTreeNode result = new WebTreeNode(domain.getMenuName(), "node" + domain.getMenuId()); if(EredcipUtils.isNotEmpty(domain.getMenuId())){ result.setAttribute("parentMenuId", domain.getMenuId()); } return result; } }; treeModelCreator.init(request); TreeModel treeModel = treeModelCreator.create(nodeList, deptUncoder); TreeDirector director = new DefaultTreeDirector(); ComboExtTreeBuilder treeBuilder = new ComboExtTreeBuilder(); treeBuilder.init(request); //防止生成DIV占位 treeBuilder.setCreateDiv(false); //menuComboTree为生成的Ext.Treepanel对象名 treeBuilder.setTreeID("menuComboTree"); treeBuilder.setRootExpand(false); director.build(treeModel, treeBuilder); String treeScript = treeBuilder.getTreeScript(); request.setAttribute("menuComboTreeScript", treeScript); } 第三步、使用ExtJS生成下拉框Combobox //输出树脚本 ${menuComboTreeScript} 说明: 看到这里，聪明的读者都会想到，如此类推其实在下拉框里放任何的Ui组件都是可以的不一定是树UI。 只要将其放到Combobox的下拉模板的DIV容器里就可。本文不再展开。 三、效果预览