ExtJS4, tree.Panel null using a json proxy

Question

I am trying to use Ext.tree.Panel with an Ext.data.TreeStore and an Ext.data.Model. I think I am doing things right but when checking my tree I can see a beatiful 'null' and that is not normal. And I think it could be because of my json url.

Let me explain how I am proceeding. Here is how I define my Model:

Ext.define('SelectedModel', {
 extend: 'Ext.data.Model',
 fields: [
    {name: 'text', type: 'string'},
    {name: 'id',  type: 'string'},
    {name: 'leaf', type: 'bool'},
    {name: 'children',  type: 'auto'},
    {name: 'singleClickExpand',  type: 'bool'},
    {name: 'status',  type: 'int'},
    {name: 'checked', type: 'boolean'},
    {name: 'fullIceCode',  type: 'string'},
    {name: 'withMenu',  type: 'bool'},
 ]
});

I read that fields 'leaf' and 'children' are present by default in all trees (with 20 others fields). So I am not sure I have to mention them. All these fields are precisely those presents in my json response (however they are not always all present in every item, like you will see in my example below). As I don't really understand how ExtJS works (this is my first week of practicing) I am wondering if I really need to write in my Model all the fields present in my json response, or just those which are present in every item of my tree.

Let see how I define my Store in my Tree:

store: Ext.create("Ext.data.TreeStore",{
         model: 'SelectedModel',
         proxy: {
               type: 'ajax',
                url: this.myaction,
                reader: {
                        type: 'json',
                }
         }  
})

At the end of the Tree constructor, if I write a console.log(this.myaction) I obtain exactly what I want which is 'stSearchAction.do?action=product_tree'. This url is the one that set the json response to the servlet. It leads to this method:

private ActionForward getSpecialToolProductTree(
        HttpServletRequest request, HttpServletResponse response) throws SystemException, ApplicativeException  {

    if (strJsonProduct == null)
    {
        strJsonProduct = getAndCreateSessionIfNeeded(request).getStrJsonProductSelector();
    }
    System.out.println(strJsonProduct);
    setResponse(response, strJsonProduct) ;

    return null ; 
}

The System.out.println(strJsonProduct) you can see shows me precisely the json string I want:

[{text : 'CASE CONSTRUCTION', id : '5 -122001754' , leaf : false , children : [{text : 'Engines', ... ... ... ... ... ... ..., singleClickExpand : true , status : 1 , checked : false , fullIceCode : 'Y.A.01.001', withMenu : true }
] , singleClickExpand : true , status : 1 }] , singleClickExpand : true , status : 1 }] , singleClickExpand : true , status : 1 }]

I don't see for now where is the problem, but I admit that I can be pretty blind sometimes.

Now the Tree:

Ext.define('Application.TreePanel', {
extend: 'Ext.tree.Panel',
requires: ['Ext.data.TreeStore'],
myaction: 'Unknown Url',
myrender: 'Unknown Render',
xtype: 'check-tree',       
rootVisible: false,
useArrows: true,
frame: true,
title: 'Unknown title',
width: 250,
height: 300,

constructor: function(myaction, mywidth, myheight, myrender, mytitle) {
    if (myaction) {
        this.myaction = myaction;
    }
    if (myrender) {
        this.myrender = myrender;
    }
    if (mytitle) {
        this.title = document.getElementById(mytitle).innerHTML;
    }
    if (mywidth) {
        this.width = mywidth;
    }
    if (myheight) {
        this.height = myheight;
    }
    console.log(this.height);
 },

 config:{
     renderTo: this.myrender,


     store: Ext.create("Ext.data.TreeStore",{
         model: 'SelectedModel',
         proxy: {
               type: 'ajax',
                url: this.myaction,
                reader: {
                        type: 'json',
                }
            }   
     })
 }

});

When I check the different attributes set in my constructor with some console.log, I got exactly what I want... All the extJs code I showed you is in a same file, tree421.js (because using ExtJS 4.2.1). What I think is there is a problem with my store, I am not doing the right thing, maybe this is not the way of using the url config for a proxy... but I can't find the good way.

I obtain some strange results. When executing these lines at the end of my tree421.js

var tree = Ext.create("Application.TreePanel", 'stSearchAction.do?action=product_tree', 300, 270, 'tree-div', 'lbl_st_tree_selection');
console.log(tree);
console.log(tree.getSelectionModel());
console.log(tree.getRenderTo());
console.log(tree.getRootNode());

I can read

j {myaction: "stSearchAction.do?action=product_tree", myrender: "tree-div", title: "Product selection", width: 300, height: 270…} tree421.js:117
A {events: Object, views: Array[0], modes: Object, selectionMode: "SINGLE", selected: A…} tree421.js:118
undefined tree421.js:119
null tree421.js:120

The second log is just a test to see what would be written but I don't really care. We can see that the tree.getRenderTo() is undefined, but I put it in config block so getters & setters should be generated, and a console.log(this.myrender) in the constructor wrote something good, so I don't understand what is going on. And last but not least my tree.getRootNode() is null...

It would be appreciated if someone with a better ExtJS understanding could advice me. I feel like there is something wrong with my way of using json url but I don't understand why. Or maybe it is something else...

Thank you for your time.

Poney

Answer 1

Ok so I worked on others trees from less important projects to get familiar with this concept and with javascript and EXTJS. So now I come back on this one and I can say that it worked fine in fact but I was not correctly getting the informations after the tree construction. The reason is that I am working on the migration of some projects from extjs-3.2.1 to extjs-4.2.1 and the whole tree system has changed. The operations node.attributes.something I used to make to get informations from a node don't work anymore and I have to pass through node.data.something or node.raw.something . That's all.

I just had to precise a reader and a root to my tree too. Anyway here is the essential part of the tree:

Ext.define('SelectedModel', {
 extend: 'Ext.data.Model',
 fields: [
    {name: 'text', type: 'string'},
    {name: 'id',  type: 'string'},
    {name: 'leaf', type: 'bool'}
 ]
});

var tree = Ext.create('Ext.tree.TreePanel',{
    renderTo:myrender,
    title: document.getElementById(mytitle).innerHTML,
    height: myheight,
    width: mywidth,
    useArrows:true,
    autoScroll:true,
    animate:true,
    ddConfig:{
        enableDrag:false,
        enableDrop:false
    },
    containerScroll: true,
    rootVisible: false,
    frame: true,

    store: Ext.create('Ext.data.TreeStore',{
        model: 'SelectedModel',
        proxy:{
            type: 'ajax',
            url:  myaction,
            reader: {
                type: 'json'       
            },
            root: {
                type: 'async'
            }
        },
        autoLoad: false
});

So there was not any problem, I just had to practice a little javascript and extjs4 and get used to javascript debugging. :)

Now I can appreciate it a little more.

Thank you