ExtJs，Jackson，Lombok，Spring 控制器 json 响应 - 树种群

Question

不缺乏 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或者controller不行...？ 网络上有很多例子，但直到现在我还没有找到适合我的东西 使用 spring 和 extjs。

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

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

Tnx ！

Answer 1

我明白了！
问题出在我的 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;
  }

我的 TreeNode BO 与 Lombok 和 Jackcon：

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;
}

我的 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;
    }

当节点被点击时，将id节点发送给控制器。

这是我的 ExtJ：

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
                 }]
             });
         });

树的生成类似于 extjs 示例 http://dev.sencha.com/deploy/ext-4.0.1/examples/tree/treegrid.html