一个Ext动态TreePanel部件

一个Ext动态TreePanel构件

?

1. 业务需求：软件开发过程中经常遇到将业务数据在页面上加载为树形方式，以展现为层次型信息。
2. 需求分析
   1. 可通过后台动态构件tree上所展展现的数据，前台声明一个TreePanel对象后，可以将请求后返回的数据加载到对象上；
   2. TreePanel可以指定请求的Url，也可以指定异步或同步的加载方式
   3. TreePanel可以指定是否显示复选框，以完成复选或单选功能
   4. 提供获取当前选择的节点的功能
3. 程序设计
   1. 首先，新增斩TreePanel继承自Ext.tree.TreePanel，以保证保留原来的TreePanel的同时，扩展新需求：

justgin.bap.TreePanel = Ext.extend(Ext.tree.TreePanel, {    title: '树',    rootText: '根节点',    rootId: '',    manageAble: true,    autoScroll: true,    url: '/Domain/DynamicTreeAjax.do', //查询数据的地址    urlParams: {},    serviceUrl: '', //外部接口，查询数据的serviceUrl    checkBox: false  //指定是否有复选框});?

?? b.然后，扩展initComponent方法，以实现动态加载数据的功能：

??

initComponent: function() {        var me = this        this.addEvents(            "beforeloadnode",            "loadnode"        )        //设置根节点        var rootConfig = {            text: me.rootText,            id: me.rootId,            draggable: false,            leaf: false        }        this.root = new Ext.tree.AsyncTreeNode(rootConfig)        if(me.url != '') {            this.loader = new Ext.tree.TreeLoader({            dataUrl: me.url,            params: Ext.apply(me.urlParams, {serviceUrl: me.serviceUrl}),            listeners: {                'beforeload': function(l, n) {                    me.fireEvent('beforeloadnode', n, me)                    l.baseParams = Ext.apply(me.urlParams, {serviceUrl: me.serviceUrl})                },                'load': function(l, n) {                          me.fireEvent('loadnode', n, me)                        l.baseParams = Ext.apply(me.urlParams, {serviceUrl: me.serviceUrl})                }            }        });        if(me.checkBox) {                Ext.apply(this.loader, {baseAttrs: {uiProvider : Ext.ux.TreeCheckNodeUI}});        }        }        me.on("render", function(me) {                me.getRootNode().expand(false)        }),        justgin.bap.TreePanel.superclass.initComponent.call(this);    }?

??? c.扩展方法getSelected()，返回单选时，当前选中的节点

?

getSelected: function() {       var nd = this.getSelectionModel().getSelectedNode();       return nd;}?

?? d.扩展方法getChecked()，返回有复选框时，选中的节点的集合（TODO）

?? e.后台返回数据的格式为Ext.tree.Panel可接受的josn格式，如下格式所示，目前许多开源的jsonUtility都提供json格式的封装，后面会专门开篇介绍本人对业务对象与json数据之间转换的设计。

?

[{    "text": "adapter",    "id": "source\/adapter",    "cls": "folder"}, {    "text": "dd",    "id": "source\/dd",    "cls": "folder"}, {    "text": "debug.js",    "id": "source\/debug.js",    "leaf": true,    "cls": "file"}]

?

? 4.使用方法

?

var tree = new Beidasoft.Bap.TreePanel({   id: 'lefttree',   title: 'SampleTreePanel',   border: false,   serviceUrl: 'ExtObjectData/extTree', //此处请求的是后台Bean中的一个方法，返回能接受的json格式   renderTo: 'divtest'});

?