PDA

View Full Version : How to populate the tree panel where data is coming from the data base.



vishal058
22 May 2013, 1:33 AM
How to populate the tree panel where data is coming from the data base. I have the JSON object from the java.I want use this object to populate the data.

Farish
22 May 2013, 2:44 AM
you can configure the treeStore's proxy with appropriate URL and then loading the store will do it.

vishal058
22 May 2013, 3:50 AM
I am a new to extjs could you please share the example code or some link which is usefull

Farish
22 May 2013, 3:57 AM
var store = Ext.create('Ext.data.TreeStore',
{
proxy: {
type: 'ajax',
url: your_URL_here
});


Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});

supply the store's proxy with your URL which returns the JSON. If your JSON is encapsulated in a root element, then you also need to tell your store that. Take a look at the documentation for the treepanel, treestore and proxy.

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.tree.Panel

friend
22 May 2013, 4:25 AM
On the server/Java side, I created a TreeNode class to model tree nodes:



public class TreeNode
{
public static final boolean EXPANDED = true;
public static final boolean COLLAPSED = false;
public static final boolean IS_BRANCH = false;
public static final boolean IS_LEAF = true;

/** Default folder icon name. */
public static final String ICON_FOLDER = "folder";

/** Default leaf icon name. */
public static final String ICON_LEAF = "leaf";

private String text;
private String id;
private String iconCls; // CSS property which points to a preferred icon.
private boolean leaf = false;
private boolean expanded = true;
private String meta;

// List of child nodes, if any.
List<TreeNode> children = new ArrayList<TreeNode>();

public TreeNode()
{
super();
}

public TreeNode(String txt, String nodeId, String iconClass, boolean isLeaf, boolean exp, String meta)
{
super();
this.setText(txt);
this.setId(nodeId);
this.setIconCls(iconClass);
this.setLeaf(isLeaf);
this.setExpanded(exp);
this.setMeta(meta);
}

<...property setter/getters here...>

public void addChild(TreeNode node)
{
this.children.add(node);
}
}


I use Spring MVC and Spring Security on the server-side, where I ripped out all of the Authentication/User Principal handling to keep this code sample brief:



@RequestMapping("/menu/load")
public @ResponseBody List<TreeNode> load()
{
List<TreeNode> list = new ArrayList<TreeNode>();

TreeNode nodeAdmin = new TreeNode("Admin", "menu.admin", TreeNode.ICON_FOLDER, TreeNode.IS_BRANCH, TreeNode.EXPANDED, "");

nodeAdmin.addChild( new TreeNode("Active Sessions", "admin.activeSessions", "iconActiveUsers", TreeNode.IS_LEAF, TreeNode.COLLAPSED, "") );

nodeAdmin.addChild( new TreeNode( "Customers", "admin.customers", "iconCustomers", TreeNode.IS_LEAF, TreeNode.COLLAPSED, "") );

list.add(nodeAdmin);

TreeNode nodeUtil = new TreeNode("Utilities", "menu.util", TreeNode.ICON_FOLDER, TreeNode.IS_BRANCH, TreeNode.EXPANDED, "");

nodeUtil.addChild( new TreeNode("Email Users", "util.email", "iconEmail", TreeNode.IS_LEAF, TreeNode.COLLAPSED, ""));

nodeUtil.addChild( new TreeNode("Reports", "util.reports", "iconReports", TreeNode.IS_LEAF, TreeNode.COLLAPSED, ""));

nodeUtil.addChild( new TreeNode("User Profile", "util.userProfile", "iconUser", TreeNode.IS_LEAF, TreeNode.COLLAPSED, ""));

list.add(nodeUtil);
return list;
}


The JSON returned to the client looks like so, where this is fed directly to an Ext.tree.Panel:



[
{
"text": "Admin",
"id": "menu.admin",
"iconCls": "folder",
"leaf": false,
"expanded": true,
"meta": "",
"children": [
{
"text": "Active Sessions",
"id": "admin.activeSessions",
"iconCls": "iconActiveUsers",
"leaf": true,
"expanded": false,
"meta": "",
"children": []
},
{
"text": "Customers",
"id": "admin.customers",
"iconCls": "iconCustomers",
"leaf": true,
"expanded": false,
"meta": "",
"children": []
}
]
},
{
"text": "Utilities",
"id": "menu.util",
"iconCls": "folder",
"leaf": false,
"expanded": true,
"meta": "",
"children": [
{
"text": "Email Users",
"id": "util.email",
"iconCls": "iconEmail",
"leaf": true,
"expanded": false,
"meta": "",
"children": []
},
{
"text": "Reports",
"id": "util.reports",
"iconCls": "iconReports",
"leaf": true,
"expanded": false,
"meta": "",
"children": []
},
{
"text": "User Profile",
"id": "util.userProfile",
"iconCls": "iconUser",
"leaf": true,
"expanded": false,
"meta": "",
"children": []
}
]
}
]


And lastly, the Tree panel config:



{
xtype: 'treepanel',
rootVisible: false,
store: {
xtype: 'store.tree',
proxy: {
type: 'ajax',
url: 'menu/load.action',
reader: {
type: 'json'
}
}
}
}

vishal058
22 May 2013, 11:49 PM
I am getting confused with the ajax calls as you have given .In some other documentation for ajax calls in the below link:-
http://www.sencha.com/forum/showthread.php?35014-ExtJS-2.1-and-Java-Demo-ExtJS-Ajax-Communication-Best-Practices
its showing the diffrent way.Please advise me