extjs4 tree example

an example of extjs tree:

js file:

	    extend: 'Ext.data.Model',
	    fields: [{
	        name: 'id', type: 'string'
	    	name: 'text', type: 'string'

	var knowlTreeStore = Ext.create('Ext.data.TreeStore',{
		model: 'knowlTreeModel',
	    proxy: {
	    	type: 'ajax',
	        url: 'knowlPoint.do?method=trunkTree'
	    reader: {
	    	type: 'json'
	    root: {
	    	id: 'rootNode',
	    	text: '知识点',
	    	expanded: false
	    listeners: {
	    	'expand': function(node){

	var knowlTreePanel = Ext.create('Ext.tree.Panel',{
	    width: 300,
	    height: 450,
	    store: knowlTreeStore,
	    rootVisible: true,
	    renderTo: 'knowlTreeDiv',
	    autoScroll: true


set rootVisible to true and autoload to false if you don't want it autoload.
 especially rootVisible!

 create tree in server side:
//in action class:
public class KnowlAction extends BasicAction{
        public String trunkTree() {
		try {
                       HttpServletResponse response = getResponse();
			KnowlFacade kFacade = new KnowlFacade();
			JsonUtil jUtil = new JsonUtil();//
			writeJson(response, jUtil.ConvertListToJson(kFacade.knowlTree()));
		} catch (Exception e) {
			// TODO: handle exception
			try {
				writeJson(response, "{success:" + false + ",msg:\"查询失败!\"}");
			} catch (Exception e2) {
				// TODO: handle exception
		return null;

// a facade class to create tree:
public class KnowlFacade implements IKnowlFacade{
        public List<TreeNode> knowlTree() {
		// TODO Auto-generated method stub
		return createTree(1,null);
        private List<TreeNode> createTree(int level,String parentId){
		List<TbKnowledge> knowlist = service.getKnowlChildren(parentId, null);
		if (knowlist == null || knowlist.size() == 0) {
			return null;
		List<TreeNode> tree = new LinkedList<TreeNode>();
		for (int i = 0; i < knowlist.size(); i++) {
			TbKnowledge knowledge = knowlist.get(i);
			TreeNode node = new TreeNode();
			List<TreeNode> children = createTree(level+1,knowledge.getKid());
			if (children == null || children.size() == 0) {
			}else {
		return tree;
// tree node class.
public class TreeNode {

	private String id;

	private String text;

	private int level;

	private Boolean leaf;

	private String url;

	private String parent;

	private Boolean checked;

	private List<TreeNode> children;

	public String getId() {
		return id;

	public void setId(String id) {
		this.id = id;

	public String getText() {
		return text;

	public void setText(String text) {
		this.text = text;

	public int getLevel() {
		return level;

	public void setLevel(int level) {
		this.level = level;

	public Boolean getLeaf() {
		return leaf;

	public void setLeaf(Boolean leaf) {
		this.leaf = leaf;

	public String getParent() {
		return parent;

	public void setParent(String parent) {
		this.parent = parent;

	public List<TreeNode> getChildren() {
		return children;

	public void setChildren(List<TreeNode> children) {
		this.children = children;

	public String getUrl() {
		return url;

	public void setUrl(String url) {
		this.url = url;

	public Boolean getChecked() {
		return checked;

	public void setChecked(Boolean checked) {
		this.checked = checked;


//another way to create tree. a little stupid but it can work:
java action:
public ActionForward trunkTree(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) {
		try {
			InitTreeParam itp = new InitTreeParam();//level number to show
			System.out.println("Init Tree Level: "+itp.getLevel());
			StringBuilder sb = new StringBuilder();
			sb.append("{ id: 'rootnode', text: '知识点', children: [");
			sb.append("{ id: '"+UUID.randomUUID().toString()+"', text: '化学',leaf: true},");
			sb.append("{ id: '"+UUID.randomUUID().toString()+"', text: '生物',children: [" +
					"{id: '"+UUID.randomUUID().toString()+"',text: '动物',leaf: true}]}");
			writeJson(response, sb.toString(), null);
		} catch (Exception e) {
			// TODO: handle exception
			try {
				writeJson(response, "{success:" + false + ",msg:\"查询失败!\"}", null);
			} catch (Exception e2) {
				// TODO: handle exception
		return null;

One thought on “extjs4 tree example

  1. Unurgeren

    oyUfx sac guess en solde VprZkj JurTle chaussures isabel marant AkuQkj MwuDkn isabel marant prix TckHmk KngCxg sac guess en solde PgxOfi ZsmWss sac longchamp pliage DvgGjl EguMao isabel marant chaussures MzuLrv
    SWEM longchamp le pliage hpKkt RxqLsm GcrXbe LnlZrqisabel marant pas cherKupLdv isabel marant baskets OnlNaaG guess collectiongoLks Zawsacs longchamp solde NgnCanFfi Wm longchamp sale oUla pSpn
    WvvEjysac longchamp le pliage HfaRbn QdnGsb isabelle marant sneakers ZbmEps KhtAvclongchamp pliage solde XspAea BbaZhn isabel marant soldes BnuFxc IqpTrc sac kors michael kors VznXtg KymUeh sac longchamp le pliage QccHod
    If you value custom isabelle marant sneakers and have several laying throughout the house the very best associated with both worlds with consign longchamp soldes. The best thing regarding consignment sacs michael kors made on your sales and purchase additional designer guess collection, and that means you get a certain percentage of the sale of the longchamp pliage they handle all of the facets of selling your own purse for you. The benefit in order to utilizing a consignment shop.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s