Javascript ExtJs、Jackson、Lombok、Spring控制器json响应-树填充

extjs树填充不缺乏 这是我的控制器：

    @RequestMapping(value = "/getTree", method = RequestMethod.GET, produces="application/json")
    @ResponseStatus(HttpStatus.ACCEPTED)
    @ResponseBody
    protected String handleRequest(HttpServletRequest request) throws Exception {

        String json = "[{'text': 'a','children': [{'text': 'b','leaf': true}, {'text': 'c','leaf': true}, {'text': 'd','leaf': true}],'leaf': false,'expanded': true},{'text': 'e','leaf': true},{'text': 'f','leaf': true}]"; 
        return json;
    }

这是我的js：

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', './extjs/ux');

Ext.require([ 
        'Ext.grid.*', 
        'Ext.data.*', 
        'Ext.util.*', 
        'Ext.tree.*',
        'Ext.toolbar.Paging', 
        'Ext.ModelManager',
        'Ext.tip.QuickTipManager']);

Ext.onReady(function(){
    var store = Ext.create('Ext.data.TreeStore', {
        proxy:{
            type: 'ajax',
            url: './getTree'
        }
    });

    Ext.create('Ext.tree.Panel', {
        title: 'tree title',
        width: 200,
        height: 200,
        store: store,
        rootVisible: false,
        renderTo: Ext.getBody()
    });
});

请看一看，可能json或控制器不正常？ 网络上有很多例子，但直到现在我还没有找到适合我的 使用spring和extjs

==================================================

问题是，我看到json是从服务器下载的，但之后不会生成树。 Tnx

我明白了
问题出在我的json生成中。 下面是我如何解决的：
我的TreeRoot BO和Lombok和Jackcon：

  import com.fasterxml.jackson.annotation.JsonAutoDetect;   
  import lombok.Data;
  @Data
  @JsonAutoDetect
  public class TreeRoot {
        private String text;
        List<TreeNode> children;
  }

import com.fasterxml.jackson.annotation.JsonAutoDetect;
import lombok.Data;

@Data
@JsonAutoDetect
public class TreeNode {
    private String id;
    private String task;
    private int duration;
    private String user;
    private String iconCls;
    private boolean expanded;
    private boolean leaf;
    private boolean checked;
    List<TreeNode> children;
}

import com.fasterxml.jackson.annotation.jsonautodect；
导入龙目数据；
@资料
@JsonAutoDetect
公共类TreeRoot{
私有字符串文本；
列出儿童名单；
}

我的TreeNode BO与Lombok和Jackcon：

  import com.fasterxml.jackson.annotation.JsonAutoDetect;   
  import lombok.Data;
  @Data
  @JsonAutoDetect
  public class TreeRoot {
        private String text;
        List<TreeNode> children;
  }

import com.fasterxml.jackson.annotation.JsonAutoDetect;
import lombok.Data;

@Data
@JsonAutoDetect
public class TreeNode {
    private String id;
    private String task;
    private int duration;
    private String user;
    private String iconCls;
    private boolean expanded;
    private boolean leaf;
    private boolean checked;
    List<TreeNode> children;
}

import com.fasterxml.jackson.annotation.jsonautodect；
导入龙目数据；
@资料
@JsonAutoDetect
公共级树节点{
私有字符串id；
私有字符串任务；
私有整数持续时间；
私有字符串用户；
私有字符串iconCls；
私有布尔扩展；
私有布尔叶；
私有布尔检查；
列出儿童名单；
}

我的Spring控制器：

    static int id = 1;

    @RequestMapping(value = "/getTree", method = RequestMethod.GET, produces="application/json")
    @ResponseStatus(HttpStatus.ACCEPTED)
    @ResponseBody
    protected TreeRoot handleRequest(HttpServletRequest request,
            @RequestParam(value = "node", required = false) String nodeId) throws Exception {

        TreeRoot root = null;
        TreeNode node = null;

        root = new TreeRoot();
        root.setText(".");
        List<TreeNode> list = new ArrayList<TreeNode>();
        root.setChildren(list);
        node = new TreeNode();
        node.setId(""+id++);
        node.setTask("Project: Shopping");
        node.setDuration(13);
        node.setUser("Tommy Maintz");
        node.setIconCls("task-folder");
        node.setExpanded(false);
        node.setChecked(true);
        node.setLeaf(false);
        list.add(node);

        node = new TreeNode();
        node.setId(""+id++);
        node.setTask("Project: Shopping1");
        node.setDuration(13);
        node.setUser("Tommy Maintz1");
        node.setIconCls("task-folder1");
        node.setExpanded(false);
        node.setChecked(true);
        node.setLeaf(true);
        list.add(node);

        return root;
    }

static int id=1；
@RequestMapping（value=“/getTree”，method=RequestMethod.GET，products=“application/json”）
@响应状态（HttpStatus.ACCEPTED）
@应答器
受保护的TreeRoot HandlerRequest（HttpServletRequest请求，
@RequestParam（value=“node”，required=false）字符串nodeId）引发异常{
TreeRoot root=null；
TreeNode=null；
root=新的TreeRoot（）；
root.setText（“.”）；
列表=新的ArrayList（）；
root.setChildren（列表）；
node=新树节点（）；
node.setId（“+id++”）；
node.setTask（“项目：购物”）；
node.setDuration（13）；
node.setUser（“Tommy Maintz”）；
node.setIconCls（“任务文件夹”）；
node.setExpanded（false）；
node.setChecked（true）；
node.setLeaf（false）；
列表。添加（节点）；
node=新树节点（）；
node.setId（“+id++”）；
node.setTask（“项目：Shopping1”）；
node.setDuration（13）；
node.setUser（“Tommy Maintz1”）；
node.setIconCls（“task-folder1”）；
node.setExpanded（false）；
node.setChecked（true）；
node.setLeaf（true）；
列表。添加（节点）；
返回根；
}

单击节点时，将id节点发送给控制器

以下是我的ExtJs：

Ext.require([
             'Ext.data.*',
             'Ext.grid.*',
             'Ext.tree.*'
         ]);

         Ext.onReady(function() {
             //we want to setup a model and store instead of using dataUrl
             Ext.define('Task', {
                 extend: 'Ext.data.Model',
                 fields: [
                     {name: 'id',     type: 'string'},
                     {name: 'user',     type: 'string'},
                     {name: 'duration', type: 'string'}
                 ]
             });

             var store = Ext.create('Ext.data.TreeStore', {
                 model: 'Task',
                 proxy: {
                     type: 'ajax',
                     //the store will get the content from the .json file
                     url: './projects/getTree'
                 },
                 folderSort: true
             });

             //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
             var tree = Ext.create('Ext.tree.Panel', {
                 title: 'Core Team Projects',
                 width: 500,
                 height: 300,
                 renderTo: Ext.getBody(),
                 collapsible: false,
                 useArrows: true,
                 rootVisible: false,
                 store: store,
                 multiSelect: true,
                 singleExpand: false,
                 //the 'columns' property is now 'headers'
                 columns: [{
                     xtype: 'treecolumn', //this is so we know which column will show the tree
                     text: 'id',
                     flex: 2,
                     sortable: true,
                     dataIndex: 'id'
                 },{
                     //we must use the templateheader component so we can use a custom tpl
                     xtype: 'templatecolumn',
                     text: 'Duration',
                     flex: 1,
                     sortable: true,
                     dataIndex: 'duration',
                     align: 'center',
                     //add in the custom tpl for the rows
                     tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
                         formatHours: function(v) {
                             if (v < 1) {
                                 return Math.round(v * 60) + ' mins';
                             } else if (Math.floor(v) !== v) {
                                 var min = v - Math.floor(v);
                                 return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
                             } else {
                                 return v + ' hour' + (v === 1 ? '' : 's');
                             }
                         }
                     })
                 },{
                     text: 'Assigned To',
                     flex: 1,
                     dataIndex: 'user',
                     sortable: true
                 }]
             });
         });

Ext.require([
“Ext.data.*”，
“Ext.grid.*”，
“Ext.tree.*”
]);
Ext.onReady（函数（）{
//我们希望设置一个模型和存储，而不是使用dataUrl
Ext.define（'任务'{
扩展：“Ext.data.Model”，
字段：[
{name:'id'，type:'string'}，
{name:'user'，type:'string'}，
{name:'duration'，type:'string'}
]
});
var store=Ext.create（'Ext.data.TreeStore'{
模型：“任务”，
代理：{
键入：“ajax”，
//存储将从.json文件中获取内容
url:“./projects/getTree”
},
folderSort：对
});
//Ext.ux.tree.TreeGrid不再是ux。您只需使用tree.TreePanel即可
var tree=Ext.create（'Ext.tree.Panel'{
标题：“核心团队项目”，
宽度：500，
身高：300，
renderTo:Ext.getBody（），
可折叠：错误，
是的，
rootVisible:false，
店:店,，
多选：对，
单选扩展：false，
//“columns”属性现在是“headers”
栏目：[{
xtype:'treecocolumn'，//这样我们就知道哪一列将显示该树
文本：“id”，
弹性：2，
可排序：是的，
数据索引：“id”
},{
//我们必须使用templateheader组件，这样才能使用自定义tpl
xtype:'templatecolumn'，
文本：“持续时间”，
弹性：1，
可排序：是的，
数据索引：“持续时间”，
对齐：'居中'，
//为行添加自定义tpl
tpl:Ext.create（'Ext.XTemplate'，{duration:this.formatHours}，'{
时间：功能（五）{
if（v<1）{
返回数学四舍五入（v*60）+“分钟”；
}否则如果（数学楼层（v）！==v）{
var min=v-数学楼层（v）；
返回数学楼层（v）+“h”+数学四舍五入（最小*60）+“m”；
}否则{
返回v+'hour'+（v==1？'''s'）；
}
}
})
},{
文本：“分配给”，
弹性：1，
dataIndex:'用户'，
可排序：正确
}]
});
});

该树的生成方式与extjs示例类似

“无缺”？你期望看到什么？你会得到什么？有什么错误吗？网络流量显示了什么？您是否尝试将问题缩小到服务器端或客户端代码？