ExtJs, Jackson, Lombok, Spring controller json response - tree population

Question

no lack with extjs tree population here is my controller :

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

here is my 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()
    });
});

Please take a look, maybe json or controller is not ok ... ? There are a lot of examples in web, but till now I did't find something works for me with spring and extjs.

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

The problem is that I see that json is downloaded from server, but tree is not generated after it.

Tnx !

*"no lack"*? What are you expecting to see and what are you getting instead? Are there any errors? What does the network traffic show? Did you try narrow down the problem to server- or client-side code? — kryger, Sep 05 '14 at 22:06

score 2 · Accepted Answer · answered Sep 06 '14 at 12:39

I got it!
The problem was in my json generation. so here is how did I solve it :
My TreeRoot BO with Lombok and Jackcon :

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

My TreeNode BO with Lombok and 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;
}

My Spring controller:

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

When node is clicked, sended to the controller the id node.

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

the tree is generated like in extjs example http://dev.sencha.com/deploy/ext-4.0.1/examples/tree/treegrid.html

ExtJs, Jackson, Lombok, Spring controller json response - tree population

The problem is that I see that json is downloaded from server, but tree is not generated after it.

1 Answers1