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

【关键词:E3.Tree ComboTree ExtJS 下拉树】一、写在最前面下拉树为下拉框和树形UI组件结合的一种高级UI表现形式，可称其为ComboTree。在权限管理模块及其他各种业务中都较为常见。此文就将结合ExtJs的Combobox组件和经过深度封装的E3.tree树形UI组件一起实现这种下拉树。二、实现步骤第一步、扩展E3.Tree的AbstractWebTreeBuilderpublic class ComboExtTreeBuilder extends AbstractWebTreeBuilder{//361行//temp.append(${treeID}.render(${treeID});).append(ENTER);}第二步、使用扩展后的ComboExtTreeBuilder构造出树形UIpublic void generateComboMenuTree(HttpServletRequest request){List nodeList = this.manageMenuResourceBpo.getMenuListByDto(new BaseDto());//业务数据解码器，从业务数据中分解出id和parentidUserDataUncoder 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