ExtJS的，杰克逊，龙目岛，春控制器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或控制器不好... ...？ 在网络上有很多例子，但直到现在我没有找到适合我的东西 与春天和extjs。

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

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

Tnx！

Answer 1

我明白了！
问题出在我的json世代。 所以这里是我怎么解决这个问题：
我的树根BO与龙目岛和Jackcon：

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

我的树节点BO与龙目岛和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; 
} 

我的春天控制器：

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节点。

这里是我的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 
       }] 
      }); 
     }); 

树就像ExtJS的例子http://dev.sencha.com/deploy/ext-4.0.1/examples/tree/treegrid.html