TreeLoader扩展,支持josn-plugin返回的json对象中包含的数组值

原文地址：http://yourgame.javaeye.com/blog/477750

 

Struts2的josn插件 josn-plugin 对我们开发extjs程序很方便,但是他每次返回的数据格式都是以一个对象的方式返回的,对象中可以包含其他格式的数据,比如数组.
这就是一般的返回格式

{ "root" :[{ "address" : "shenzhen" , "company" : "Bank of China" , "manager" : "true" , "name" : "Jack" , "password" : "a" , "userid" : "8ad08c8323eeb3ba0123eeb3c6e20001" , "username" : "a" , "zip" : "518000" },{ "address" : "dongjing" , "company" : "Bank of Japan" , "manager" : "false" , "name" : "Jack Cheng" , "password" : "b" , "userid" : "8ad08c8323eeb3ba0123eeb3c6e20002" , "username" : "b" , "zip" : "518000" }], "totalProperty" :2}

{"root":[{"address":"shenzhen","company":"Bank of China","manager":"true","name":"Jack","password":"a","userid":"8ad08c8323eeb3ba0123eeb3c6e20001","username":"a","zip":"518000"},{"address":"dongjing","company":"Bank of Japan","manager":"false","name":"Jack Cheng","password":"b","userid":"8ad08c8323eeb3ba0123eeb3c6e20002","username":"b","zip":"518000"}],"totalProperty":2}

struts2后台配置为

< action   name = "getUsers"   class = "userAction"   method = "getUsers" >
     < result   type = "json" >
         < param   name = "root" >
        page
         </ param >
         < param   name = "excludeNullProperties" >
        true
         </ param >
         < param   name = "includeProperties" >
        root.*,totalProperty
         </ param >
     </ result >
</ action >

<action name="getUsers" class="userAction" method="getUsers">
    <result type="json">
        <param name="root">
        page
        </param>
        <param name="excludeNullProperties">
        true
        </param>
        <param name="includeProperties">
        root.*,totalProperty
        </param>
    </result>
</action>

而我们做树(TreePanel)的时候需要服务器返回的数据是数组对象的形式.如下

[{ "address" : "shenzhen" , "company" : "Bank of China" , "manager" : "true" , "name" : "Jack" , "password" : "a" , "userid" : "8ad08c8323eeb3ba0123eeb3c6e20001" , "username" : "a" , "zip" : "518000" },{ "address" : "dongjing" , "company" : "Bank of Japan" , "manager" : "false" , "name" : "Jack Cheng" , "password" : "b" , "userid" : "8ad08c8323eeb3ba0123eeb3c6e20002" , "username" : "b" , "zip" : "518000" }]

[{"address":"shenzhen","company":"Bank of China","manager":"true","name":"Jack","password":"a","userid":"8ad08c8323eeb3ba0123eeb3c6e20001","username":"a","zip":"518000"},{"address":"dongjing","company":"Bank of Japan","manager":"false","name":"Jack Cheng","password":"b","userid":"8ad08c8323eeb3ba0123eeb3c6e20002","username":"b","zip":"518000"}]

但是json-plugin不支持直接返回这种格式,所以我们可以修改一下TreeLoader的处理函数

//TreeLoader扩展,支持josn-plugin返回的json对象中包含的数组值
Ext.tree.JsonPluginTreeLoader =  function  (config) {
     this .rootName =  'root' ;
    Ext.tree.JsonPluginTreeLoader.superclass.constructor.call( this , config);
}
Ext.extend(Ext.tree.JsonPluginTreeLoader, Ext.tree.TreeLoader, {
    processResponse:  function  (response, node, callback,scope) {
         var  json = response.responseText;
         try  {
             var  o = response.responseData || Ext.decode(json);
//在原代码基础上增加了下面处理---------------------
             if  (Ext.type(o) ==  'object' ) { //如果返回的是对象则获取他的root部分,rootName是可以在使用的时候配置的
                o = o[ this .rootName ||  'root' ];
            }
//--------------------------------------------------
            node.beginUpdate();
             for  ( var  i = 0, len = o.length; i < len; i++) {
                 var  n =  this .createNode(o[i]);
                 if  (n) {
                    node.appendChild(n);
                }
            }
            node.endUpdate();
             this .runCallback(callback, scope || node, [node]);
        }  catch (e) {
             this .handleFailure(response);
        }
    }
});

//TreeLoader扩展,支持josn-plugin返回的json对象中包含的数组值
Ext.tree.JsonPluginTreeLoader = function (config) {
    this.rootName = 'root';
    Ext.tree.JsonPluginTreeLoader.superclass.constructor.call(this, config);
}
Ext.extend(Ext.tree.JsonPluginTreeLoader, Ext.tree.TreeLoader, {
    processResponse: function (response, node, callback,scope) {
        var json = response.responseText;
        try {
            var o = response.responseData || Ext.decode(json);
//在原代码基础上增加了下面处理---------------------
            if (Ext.type(o) == 'object') {//如果返回的是对象则获取他的root部分,rootName是可以在使用的时候配置的
                o = o[this.rootName || 'root'];
            }
//--------------------------------------------------
            node.beginUpdate();
            for (var i = 0, len = o.length; i < len; i++) {
                var n = this.createNode(o[i]);
                if (n) {
                    node.appendChild(n);
                }
            }
            node.endUpdate();
            this.runCallback(callback, scope || node, [node]);
        } catch(e) {
            this.handleFailure(response);
        }
    }
});

使用方法

{
    xtype:  'treepanel' ,
    loader:  new  Ext.tree.JsonPluginTreeLoader({
        dataUrl:  'xxx.action'
         //rootName:'nodes' //这里可以动态配置,已配合服务器返回的数组名称:)
    }),
    root:  new  Ext.tree.AsyncTreeNode({
        text:  '根节点'
    })
}

{
    xtype: 'treepanel',
    loader: new Ext.tree.JsonPluginTreeLoader({
        dataUrl: 'xxx.action'
        //rootName:'nodes' //这里可以动态配置,已配合服务器返回的数组名称:)
    }),
    root: new Ext.tree.AsyncTreeNode({
        text: '根节点'
    })
}

后台struts2的josn配置如下

< action   name = "getUsers"   class = "userAction"   method = "getUsers" >
     < result   type = "json" >
         < param   name = "root" >
        page
         </ param >
         < param   name = "excludeNullProperties" >
        true
         </ param >
         < param   name = "includeProperties" >
        root.*
         </ param >
     </ result >
</ action >