PDA

View Full Version : labels are empty when rendering Tree with json data: EXTJS 4.0.7-gpl



ayub
18 Feb 2012, 6:57 AM
I am using EXTJS 4.0.7-gpl. Below is the code for rendering Tree, seems like the Tree rendered is having multiple nestings (recursive) and the label for root and leaf nodes is not being displayed, just the blank with folder icons. Could some one suggest whats the issue with the below code ?




Ext.define('MyModel', {
extend: 'Ext.data.Model',

config: {
fields: ['organizationID','organizationName','organizationType']
}

});




var store = Ext.create('Ext.data.TreeStore', {
model: 'MyModel',

proxy: {
type: 'ajax',
api: {
read : '/JSF2Web/SenchaHRServlet?action=ini'
},

reader: {
type: 'json',
root:'organizationList'

}


}

});

var tree=Ext.create('Ext.tree.Panel', {

title: 'Simple Tree',
height: '100%',
width: '25%',
store:store,
rootVisible:false
});




Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
height: '100%',
title: 'Container Panel',
layout: 'column',
items: [tree,

{
xtype: 'panel',
title: 'Child Panel 2',
height: '100%',
width: '75%'
}
]
});

Below is the json object from server:

{"organizationName":"abc","organizationList":[{"organizationName":"org1","organizationType":"p","organizationID":"271","organizationList":[]},{"organizationName":"org2","organizationType":"q","organizationID":"271","organizationList":[]}]


}

ayub
18 Feb 2012, 12:03 PM
modified my code as listed in http://www.clintharris.net/2011/how-to-use-extjs-4-treepanels-with-both-static-data-and-model-stores/

T (http://www.clintharris.net/2011/how-to-use-extjs-4-treepanels-with-both-static-data-and-model-stores/)he issue now is that the tree gets nested infinitely with duplicate nodes. Not sure what might be the issue. Below is my append method

code:

append: function( thisNode, newChildNode, index, eOpts ) {

// If the node that's being appended isn't a root node, then we can
// assume it's one of our UserModel instances that's been "dressed
// up" as a node
if( !newChildNode.isRoot() ) {

// The node is a UserModel instance with NodeInterface
// properties and methods added. We want to customize those
// node properties to control how it appears in the TreePanel.

// A user "item" shouldn't be expandable in the tree
//newChildNode.set('leaf', true);

// Use the model's "name" value as the text for each tree item
newChildNode.set('text', newChildNode.get('organizationName'));

// Use the model's profile url as the icon for each tree item

}
}

vietits
18 Feb 2012, 5:22 PM
Because your model does not have 'text' field so you need to tell your treepanel which field should be use for label. To do this, you just need to include the 'columns' config as follow (in red color):


var tree = Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
height: '100%',
width: '25%',
store:store,
rootVisible:false,
columns: [{
xtype: 'treecolumn',
dataIndex: 'organizationName',
...
}]
});

Also, you could modify your model definition as below:


Ext.define('MyModel', {
extend: 'Ext.data.Model',
idProperty: 'organizationID',
fields: ['organizationID','organizationName','organizationType']
});

ayub
18 Feb 2012, 11:40 PM
Thank you for the clue, it helped to display the labels. Now when I expand some nodes I get the below error:

records[i] is undefined




ns[i].viewRecordId = records[i].internalId;Below is the proxy and model, I googled and found that this issue might happen if ids are not unique, I tried to include the organizationID in the reader still same issue, please give some clue.







Ext.define('UserModel', {
extend: 'Ext.data.Model',
idProperty: 'organizationID',
fields: ['organizationID','organizationName','organizationType','organizationManagerName']
});

var userTreeStore = Ext.create('Ext.data.TreeStore', {

model: 'UserModel',
root: {
text: 'All Lists',
id: "root",
expanded: true
},
proxy: {
type: 'ajax',
url : 'org.json',
reader: {
type: 'json',
root: 'organizationList',
idProperty: 'organizationID'
}
}

});

vietits
18 Feb 2012, 11:50 PM
1. You should place your code between CODE tag for clarity.

2. Re-check your data. It seems that organizationID is not unique.



{
"organizationName":"abc",
"organizationList":[{
"organizationName":"org1",
"organizationType":"p",
"organizationID":"271",
"organizationList":[]
},{
"organizationName":"org2",
"organizationType":"q",
"organizationID":"271",
"organizationList":[]
}]
}

ayub
19 Feb 2012, 1:41 AM
thank you for the reply, I verified the json data I am getting and it does not have duplicate organizationID. The json I posted had a typo error. Any other clues what might be the issue. This seems to be very common error, not able to find the answer using google or other forums.

vietits
19 Feb 2012, 6:31 AM
I have run below code which is based on your code without problem. I use Ext 4.0.7 and Chrome 17.



Ext.Loader.setConfig({
enabled: true
});


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


Ext.onReady(function() {
Ext.define('UserModel', {
extend: 'Ext.data.Model',
idProperty: 'organizationID',
fields: ['organizationID','organizationName','organizationType','organizationManagerName']
});

var userTreeStore = Ext.create('Ext.data.TreeStore', {
model: 'UserModel',
root: {
text: 'All Lists',
id: "root",
expanded: true
},
proxy: {
type: 'ajax',
url : 'org.json',
reader: {
type: 'json',
root: 'organizationList'
}
}
});

var tree = Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
height: 200,
width: 250,
store:userTreeStore,
rootVisible:false,
renderTo: Ext.getBody(),
columns: [{
xtype: 'treecolumn',
text : 'Name',
flex : 1,
dataIndex: 'organizationName'
}]
});
});


org.json


{
"organizationName":"abc",
"organizationList":[{
"organizationName":"org1",
"organizationType":"p",
"organizationID":"271",
"organizationList":[{
"organizationName":"org1.1",
"organizationType":"p.1",
leaf: true,
"organizationID":"2711",
}]
},{
"organizationName":"org2",
"organizationType":"q",
"organizationID":"272",
"organizationList":[{
"organizationName":"org2.1",
"organizationType":"p.2",
leaf: true,
"organizationID":"2721",
}]
}]
}

ayub
19 Feb 2012, 9:43 AM
Thank you for trying out the sample json and thank you for persisting with this issue.


If I manually put leaf:true, the sample works, however since the json is coming from the server should I manipulate the jason object to have this config ? is there any alternate on the client side to detect that there are no children to the node and not throw the error ?

when leaf:true is not part of jason array, I noticed that if the root node of a branch does not have any children then the expand option is not shown, however the expand option is displayed for the child node even if there are no further childs. This is where the error is thrown.

Please let me know your suggestion.

vietits
19 Feb 2012, 3:55 PM
In the case the last node of a branch is not a leaf you should inform the tree that this node has no children:


{
"organizationName":"abc",
"organizationList":[{
"organizationName":"org1",
"organizationType":"p",
"organizationID":"271",
"organizationList":[{
"organizationName":"org1.1",
"organizationType":"p.1",
"organizationID":"2711",
organizationList: []
}]
},{
"organizationName":"org2",
"organizationType":"q",
"organizationID":"272",
"organizationList":[{
"organizationName":"org2.1",
"organizationType":"p.2",
"organizationID":"2721",
organizationList: []
}]
}]
}

ayub
19 Feb 2012, 4:24 PM
Thank you, may be I will modify the json object from server side.

Sarteg
23 Jul 2013, 5:09 AM
Thank you for trying out the sample json and thank you for persisting with this issue.


If I manually put leaf:true, the sample works, however since the json is coming from the server should I manipulate the jason object to have this config ? is there any alternate on the client side to detect that there are no children to the node and not throw the error ?

when leaf:true is not part of jason array, I noticed that if the root node of a branch does not have any children then the expand option is not shown, however the expand option is displayed for the child node even if there are no further childs. This is where the error is thrown.

Please let me know your suggestion.


I would like to know about this question as well