Dynamic Spanning Tree in Extjs

In many cases, we need to dynamically generate a tree for two reasons. One is that the data of children on each tree node changes at any time, and the other is that loading data at a time takes a long time when the data volume is large.

Let's look at the definition of treestore and treepanel when loading trees dynamically.

// TreeStore (the first tree)
Var businessTreeStore = Ext. create ('ext. data. treestore ',{
Proxy :{
Type: 'ajax ',
Url: serviceUrl // data loading path
}, Www.2cto.com
Fields: ['indexid', 'text', 'caseid', 'msgtype', 'icon ', 'leaf'], // data item
Root :{
Text: proName, // The content displayed on the root node, where proName is a variable
Id: indexId,
Icon: 'resources/images/pic/data-Backup.png ',
Expanded: true
},
FolderSort: true,
Sorters: [{// Tree node sorting settings
Property: 'indexid ',
Direction: 'asc'
}],
Listeners: {// pay attention to the beforeload parameter and determine the parameter for loading data when you click a non-leaf node.

Beforeload: function (ds, opration, opt ){
If (opration. node. data. depth = 0) {// set the first-level node loading parameter below
ResultbodyValue + = planId
Opration. params. headValue = resultheadValue; // Where headvalue is the parameter name, And resultheadValue is the previously defined variable
Opration. params. handleMsg = resulthandleMsg;
Opration. params. returnMsg = returnMsgBusiness;
Opration. params. bodyValue = resultbodyValue;

} Else if (opration. node. data. depth = 1) {// Level 2 node
Opration. params. headValue = resultheadValue;
Opration. params. handleMsg = resulthandleMsg;
Opration. params. returnMsg = returnMsgProcess;
Opration. params. bodyValue = resultbodyValue + "^ result. caseId:" + opration. node. data. caseId;
}
}
}
});

 

The following is the definition of treePanel.

// Directory tree of the Business Domain (the first tree), displayed when the page is loaded
Var businessTree = Ext. create ('ext. tree. Panel ',{
Id: 'panel. businesstree ',
Title: 'test records ',
RootVisible: true,
Split: true,
Region: 'center ',
MinSize: 100,
MaxSize: 300,
Store: businessTreeStore,
Listeners :{
'Itemclick': function (view, record, items, index, e ){
// Click a non-leaf node (Business Domain)
If (record. data. depth = 0 ){

// Add corresponding events based on different nodes in the tree.
} If (record. data. depth = 1 ){
}
Else if (record. data. leaf = true ){
// When it is a leaf node
}
}
///}, // Add the right-click event as needed.
// 'Itemcontextmenu ': function (menutree, record, items, index, e ){
// E. preventDefault ();
// E. stopEvent ();
// If (record. data. leaf = false ){
//// Right-click the second-level business domain
// Var tempmenu = new Ext. menu. Menu ({
// Floating: true,
// Items :[{
// Text: "deleting a business domain ",
// Handler: function (){
// CurrentNode = record;
// Var con = confirm ("are you sure you want to delete this business domain? ");
// If (con = true ){
//
// Var persistentId = currentNode. get ('persistentid ');
// Var bodyDeleteBusiness = "business. persistentId:" + persistentId
// Ext. Ajax. request ({
// Url: "SWAPCSP. CSP. ServiceProxy. cls ",
// Timeout: 60000,
// Params :{

//},
// Method: 'post ',
// Success: function (response, opts ){
// CurrentNode. parentNode. set ('expanded', false); // node update
// CurrentNode. parentNode. set ('loading', false );
// CurrentNode. parentNode. set ('loaded', false );
// CurrentNode. parentNode. expand ();
////}
//});
//
//} Else {}
//}
//}]
//});
//}
// Tempmenu. showAt (e. getXY ());
//}
}
});

After one load

 

After secondary loading