Extjs_10 _ custom combotree component, extjs_10combotree

Extjs_10 _ custom combotree component, extjs_10combotree
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,expandable : true,children : [{text : "user4",leaf : true}, {text : "user5",leaf : true}, {text : "user6",leaf : true}, {text : "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 () {// The content displayed in the displayTpl text box in the tpl drop-down box this. treeid = Ext. string. format ("combo-tree-{0}", Ext. id (); this. tpl = Ext. string. format ("<div id = {0}> </div>", this. treeid); if (this. url) {// determine whether the url is configured with var me = this; var treeStore = Ext. create ("Ext. data. treeStore ", {root: {expand Ed: true}, // expand proxy: {type: "ajax", url: this. url}); this. tree = Ext. create ("Ext. tree. panel ", {rootVisible: false, // do not display the root node autoScorll: true, height: 200, store: treeStore}); this. tree. on ("itemclick", function (combo, record) {// listen to the tree click event if (me. fireEvent ("select", me, record) // This is the case when cascade operations are performed (the first combobox triggers the second combobox filter) {me. setValue (record); me. collapse (); // collapse node}); this. on ("expand", function () {// Render this. tree. store. load () when expanding; // re-render the data when expanding to ensure that the data is the latest if (! This. tree. rendered) {// determine whether to render this. tree. render (this. treeid); // rendering}); // if (me. fireEvent ("select", me, record) cannot listen to the 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">