Extjs4 + Servlet/struts2 + JSON + accordion dynamic Ext. Tree. Panel menu

First, I will post a picture to show you how to implement a dynamic menu of Accordion layout, which is commonly known as the layout of a hand-held piano. window. window), select accordion for layout, code:

VaR win = ext. create ("Ext. window. window ", {Title:" accordion layout dynamic menu ", width: 300, height: 500, iconcls:" icon-accordion ", autoscroll: false, layout: 'accordion ', // set layoutconfig: {Animate: True // dynamically switch tree space}); win. show ();

Then, send an Ajax request to the background to obtain the panel list of the window:

Ajax ({URL: "/accordion", // obtain the address of the Panel Params: {Action: "list"}, callback: addtree });

The Ext. Ajax. Request Method is encapsulated as follows:

VaR Ajax = function (config) {// encapsulate and simplify ajaxext. ajax. request ({URL: config. URL, // request address Params: config. params, // Request Parameter Method: 'post', // method callback: function (options, success, response) {config. callback (ext. JSON. decode (response. responsetext); // call the callback function}); Return false ;};

In the servlet code, prepare the data of the tree Panel. In the dopost method, determine whether to obtain the panel list or tree node based on the action, and then send the data to the page. The rendertext method is not critical, you can download the source code and do not write it here:

Public void dopost (httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {string action = request. getparameter ("action"); initheader (response); If (action. equals ("list") {// obtain the rendertext (this. gettreepanellist (), response);} else if (action. equals ("Node") {rendertext (this. gettreenodelist (request. getparameter ("ID"), response );}}

The tree panel list obtained here is called as follows:

Public String gettreepanellist () {jsonarray array = new jsonarray (); For (INT I = 0; I <5; I ++) {// generate five subordinate panel jsonobject JSON = new jsonobject (); JSON. element ("ID", I + 1); JSON. element ("iconcls", "icon-panel"); JSON. element ("title", "accordion menu" + (I + 1); array. add (JSON);} return array. tostring ();}

Use Google Chrome's development tool to view the retrieved tree panel list data:

After obtaining the owner panel list, run the addtree callback function to generate the tree Panel (ext. tree. before creating a tree panel, you must register a data source and specify a data model for the data source, the role of the data model is to pass the desired business data, that is, data irrelevant to the Tree display, to the page for ease of use:

Function addtree (data) {for (VAR I = 0; I <data. length; I ++) {win. add (ext. create ("Ext. tree. panel ", {Title: Data [I]. title, iconcls: Data [I]. iconcls, autoscroll: True, rootvisible: false, viewconfig: {loadingtext: "loading... "}, store: createstore (data [I]. ID)}); win. dolayout () ;}} VAR model = ext. define ("treemodel", {// defines the tree node data model extend: "Ext. data. model ", fields: [{name:" ID ", type:" string "}, {name : "Text", type: "string" },{ name: "iconcls", type: "string" },{ name: "leaf", type: "Boolean"}]}); var createstore = function (ID) {// create a tree panel data source var me = This; return Ext. create ("Ext. data. treestore ", {defaultrootid: ID, // Default Root Node ID model: model, proxy: {type:" ajax ", // obtain Method URL:"/accordion? Action = node "// get the address of the Tree node}, clearonload: True, nodeparam:" ID "// set the parameter name passed to the background, the value is the ID attribute of the Tree node });};

The last step is to generate the data of the Tree node:

Public String gettreenodelist (string ID) {// obtain the data of the Tree node jsonarray array = new jsonarray (); For (Int J = 0; j <5; j ++) {jsonobject JSON = new jsonobject (); JSON. element ("ID", ID + "-" + (J + 1); JSON. element ("text", "Tree node-" + ID + "-" + (J + 1); If (J + 1) % 2 = 0 & ID. length () <= 3) {// nodes with an even number of nodes and nodes with no more than three layers can be loaded with subnode JSON. element ("leaf", false); // you can use the leaf attribute to control whether a tree node is a leaf node (a node without a subnode) and whether data can be loaded} else {JSON. element ("leaf", true);} array. add (JSON);} return array. tostring ();}

However, after implementing these codes, you will find a bug in the display of the subordinate panel. The width of the tree space in the tree panel is incorrect:

This is an ext4 bug, but it doesn't matter. Bugs can always be fixed. Modify the addtree code and register an afterlayout listener for the tree panel, the code in the instance is transformed, just to explain the purpose of this Code:

Function addtree (data) {for (VAR I = 0; I <data. length; I ++) {win. add (ext. create ("Ext. tree. panel ", {Title: Data [I]. title, iconcls: Data [I]. iconcls, autoscroll: True, rootvisible: false, viewconfig: {loadingtext: "loading... "}, store: createstore (data [I]. ID), listeners: {afterlayout: function () {If (this. getview (). el) {var El = This. getview (). el; var table = el. down ("table. x-grid-table "); If (table) {table. setwidth (El. getwidth () ;}}}}); win. dolayout ();}}

The last topic is how to implement it in struts. It's easy: Prepare data and send the data to the page! In this way, the servlet/struts2 + JSON + dynamic Ext. Tree. Panel menu will be OK for an accordion layout!
The following shows the effects of applying this module to the system: What can ext do? There is nothing unexpected. You can't do it anymore. Go to http://blog.csdn.net/leecho571/article/details/8207102competent extto bring a new experience.

Download instance: Success !!