1. Project
2.treedata.json
{text: "root", Expanded:true,expandable:true,children: [{text: "Dept 1", Leaf:false,expandable:true,children: [{ Text: "User1", leaf:true}, {text: "User2", leaf:true}, {text: "User3", Leaf:true}]}, {text: "Dept 2", leaf:false,e Xpandable:true,children: [{text: "User4", leaf:true}, {text: "User5", leaf:true}, {text: "User6", Leaf:true}, {Te XT: "User7", leaf:true}, {text: "User8", Leaf:true}]}]}
3.combotree.js
Ext.define ("Ext.ux.ComboTree", {extend: "Ext.form.field.ComboBox", Alias: "Widget.combotree", url: "", Tree: {}, Initcomponent:function () {//TPL drop-down box displays content displaytpl text box display This.treeid = Ext.String.format ("combo-tree-{0}", Ext.id ()) ; this.tpl = Ext.String.format ("<div id={0}></div>", This.treeid); if (This.url) {//Determines whether the URL is configured with var me = this; var treestore = ext.create ("Ext.data.TreeStore", {root: {expanded:true},//Default expansion proxy: {type: "Ajax", Url:this.url}}) ; this.tree = Ext.create ("Ext.tree.Panel", {rootvisible:false,//does not show root node Autoscorll:true,height:200,store:treestore}) This.tree.on ("ItemClick", function (combo, record) {//Listen to the tree's Click event if (Me.fireevent ("Select", Me, record)// This is done when cascading operations (the first ComboBox causes a second ComboBox filter) {Me.setvalue (record); Me.collapse ();//Collapse Node}}); This.on ("Expand", function () {//unfold when rendering this.tree.store.load ();//re-render the data when expanded to ensure that the data is up-to-date if (!this.tree.rendered) {//To determine whether to render This.tree.render ( This.treeid);//Render}});//if (Me.fireevent ("select", Me,record)) do not listen when not written SeleCT Event This.on ("Select", Function (combo, record) {Ext.Msg.alert ("Title", "you selected" + Record.data.text);})} This.callparent ();}})
4.comboboxtree.jsp
<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >