ExtJs学习笔记 根据数据库生成动态多级树

Ext.tree.TreePanel

The TreePanel provides tree-structured UI representation of tree-structured data. A TreePanel must be bound to a Ext.data.TreeStore. TreePanel's support multiple columns through the columns configuration.

---

 

Ext.data.TreeStore是Ext.tree.TreePanel的数据源，可以提供proxy（数据代理）方法来加载节点，一个treestore的构建方式如下：

var tree_store = Ext.create('Ext.data.TreeStore', {    id:'tree_store',    proxy: {        type: 'ajax',        url: '../services/Tree.ashx',        reader: {            type: 'json'        }    },    root: { expanded: false },//    autoLoad: false});

这里把需要注意autoLoad这个配置项，这里即使配置了false，treestore还是会自动加载，如果要实现在事件里面手动加载而不是自动加载除了把autoLoad设置成false还必须把root: { expanded: false }这样设置。

这里的ajax请求返回的必须是满足树形结构的json格式如下：

[{'id':'1','text':'云南供电局','children':[{'id':'403351','text':'测试','children':[{'id':'403352','text':'测试小区','children':[{'id':'403360','text':'53001232','leaf':true},{'id':'403359','text':'53001231','leaf':true},{'id':'403353','text':'测试台区','leaf':true},{'id':'403355','text':'53001236','leaf':true},{'id':'403356','text':'53001237','leaf':true},{'id':'403357','text':'53001238','leaf':true},{'id':'403358','text':'53001239','leaf':true},{'id':'403361','text':'53001240','leaf':true}]}]},{'id':'402930','text':'成都军区昆明解甲园','children':[{'id':'402931','text':'解甲园','children':[{'id':'401752','text':'解甲园','leaf':true}]}]},{'id':'401741','text':'个旧市供电局','children':[{'id':'401742','text':'个旧市','children':[{'id':'402929','text':'53010001','leaf':true},{'id':'403333','text':'53010002','leaf':true},{'id':'401743','text':'丽水金湾一号变压器','leaf':true},{'id':'401751','text':'丽水金湾二号变压器','leaf':true}]}]}]}]

对应界面截图及Firebug截图：

所以后台如何生成这个json返回给前段treestore才是技术关键（这里略去，主要实现方法是设计的数据库表示有树形结构的，比如id，pid，查询这个表得到一个datatable，再根据这个datatable递归的方法去组合得到json字符串）

最后，就可以用这个treestore给treepanel做加载，这里代码完成了手动加载的方式，采用监听load事件，完成节点的展开，并且监听单击节点所要完成的一些工作，还有加上手动刷新tools按钮，并且刷新时候完成节点展开。

var treePanel = Ext.create('Ext.tree.Panel', {    //layout:'fit',    stateId: 'navigation-panel',    id: 'tree-panel',    title: '拓扑结构',    region: 'west',    split: true,    width: 200,    minWidth: 175,    maxWidth: 400,    animCollapse: true,    rootVisible: false,  //默认不显示根节点    //singleExpand: true, //    //containerScroll:true,    useArrows: true,    store: tree_store,    //root: {expanded: true},    tools: [{        type: 'refresh',        tooltip: '刷新',        // hidden:true,        handler: function() {//Ext.data.Store load            tree_store.load({                scope: this,                callback: function(records, operation, success) {                    //Ext.Msg.alert('refresh success!');                    treePanel.getRootNode().eachChild(function(child) { child.expand(); });                }            });        }    }    ],    collapsible: true,    listeners: {        'load' : function(){            treePanel.expandAll();        },         'itemclick': function(view, record, item, index, e) {            nodeId = record.raw.id; //获取点击的节点id            nodeText = record.raw.text; //获取点击的节点text            //Ext.Msg.alert('info', nodeId + nodeText);            if (tree_store.getNodeById(nodeId).hasChildNodes() === true) {                ReloadMainCollectionGridTab(nodeId, 'QB', Ext.getCmp('datepicker').getRawValue(), 1, 0, 0, 1, 0, 0, 0, 0, nodeText); //            }            else {                LoadConcentratorInfoStore(nodeId);                Ext.Msg.alert('设备管理', nodeId + nodeText);            }            //Ext.Msg.alert('text', nodeText);        }    }});