ExtJs4.0.7Dynamictree dynamic menu tree

I have been interested in ExtJs4x for a long time and have been using it for work reasons. Recently I have finally had time to learn ExtJs407, and I found that it is very different from ExtJs3, the specific details are not written here, because there are a lot of Daniel who have already summarized them. I have been following ExtJs4.x for a long time and I have been interested in it all the time, I have been using 3.xfor work reasons, and recently I have finally had time to learn about ExtJs4.0.7. I found that there is a big difference with ExtJs3, and the details are not here, because a lot of big cows have already been summed up, I am waiting for the fart to follow the footsteps of these big cows step by step. For the differences, see: http://www.hzuwando.com/Blog/MyBlogContent.aspx?user=luxiaoyong&id=79 Today, I will summarize the process of developing a dynamic menu tree. If you don't talk about it, go directly to the code. 1. define a data model menuInfo [javascript] Ext. regModel ('menuinfo', {fields: [{name: 'id', type: 'string', defaultValue: null}, {name: 'text', type: 'string', defaultValue: null}, {name: 'leaf', type: 'bool ', defaultValue: false}, {name: 'cls', type: 'string ', defaultValue: null}, {name: 'iconcls', type: 'string', defaultValue: null}, {name: 'page', // custom type: 'string ', defaultValue: null}]}); this model is used to parse Json data. page is a custom attribute. If no extended attribute is required, you can use Ext. tree. properties provided by Panel. This step can be omitted; 2. define a TreeStore [javascript var store = Ext. create ('ext. data. treestore', {model: 'menuinfo', // use the specified data model to receive data. If you do not need a custom data model, do not write proxy: {type: 'ajax ', url: 'index _ initMenuBar. do '}, // define a data proxy root: {text: 'root node', id: '0', expanded: true}, folderSort: true, sorters: [{property: 'text', ction: 'asc '}]}); I will not explain this. You can understand the annotations. 3. define a TreePanel [javascript] var tree = Ext. create ('ext. tree. panel ', {store: store, rootVisible: false, viewConfig: {plugins: {ptype: 'treeviewdragdrop'}, renderTo: Ext. getBody (), height: 600, autoScroll: true, useArrows: true, dockedItems: [{xtype: 'toolbar', items: [{text: 'expanded', handler: function () {tree. expandAll () ;},{ text: 'login', handler: function () {tree. collapseAll () ;}}]}); OK, now the JS Code is complete. Next, check the background code. [java] public JSONArray getTreeNodes (String node, int uid) {List Exist ist = indexDao. getTreeNodes (node, uid); JSONArray json = new JSONArray (); for (int I = 0; I <jsonist. size (); I ++) {JSONObject child = new JSONObject (); Menubar mb = existing ist. get (I); child. put ("id", mb. getId (); child. put ("text", mb. getText (); [java] if (GMUtils. isEmpty (mb. getPage () {child. put ("leaf", false); child. put ("cls", "folder");} else {child. put ("leaf", true); child. put ("cls", "file "); Child. put ("page", mb. getPage ();} json. add (child) ;}return json; here we will explain that, because the menu is obtained asynchronously, a node is passed in when TreeStore obtains data, that is, the node id you clicked, the root node id is defined as 0 in the root, and the Java code obtains its sub-Nodes Based on the node, and then traverses and assembles json data. The structure of my data table is relatively simple, when the page in Menubar is empty, it indicates that the node is not the final subnode, that is, leaf = false, cls = folder; when the page is not empty, it indicates that the node is a leaf node, and leaf = true, cls = file; after the json data is assembled, it is OK to convert it into a string and return it!: