[JAVASCRIPT][EXTJS]直接用JSON创建树形控件（Ext.tree.TreePanel ）

直接用JSON创建树形控件（Ext.tree.TreePanel ）
1、创建多个根节点的树形
2、直接使用JsonList创建树形
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="keywords" content="Extjs, Ext, Ext JS, Ext JavaScript, example, fully loaded tree example, static tree, tree example Ext" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fully Loaded Tree</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" target="_blank" rel="external nofollow"  mce_href="resources/css/ext-all.css" target="_blank" rel="external nofollow"  />
<mce:script type="text/javascript" src="../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="../../ext-all.js" mce_src="ext-all.js"></mce:script>
<mce:script type="text/javascript" src="../../ext-lang-zh_CN.js" mce_src="ext-lang-zh_CN.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
    
    // json data describing the tree
	var json = [
	{"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [ 
	    {"text" : "A3", "id" : 10001, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "A4", "id" : 10002, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "A6", "id" : 10003, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "A8", "id" : 10004, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Q7", "id" : 10005, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "S4", "id" : 10006, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "S6", "id" : 10007, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "S8", "id" : 10008, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "TT", "id" : 10009, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    }]
	},
	{"text" : "BMW", "id" : 200, "leaf" : false, "cls" : "folder", "children" : [ 
	    {"text" : "3 Series Convertible", "id" : 10001, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "3 Series Coop", "id" : 10002, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "3 Series Sedan", "id" : 11000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "3 Series Sports Wagon", "id" : 21000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "5 Series", "id" : 31000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "6 Series", "id" : 41000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "7 Series", "id" : 51000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "M", "id" : 61000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "M3", "id" : 71000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "M5", "id" : 81000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "M6", "id" : 91000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "X3", "id" : 101000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "X5", "id" : 111000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Z4", "id" : 121000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    }]
	},
	{"text" : "Cadillac", "id" : 300, "leaf" : false, "cls" : "folder", "children" : [ 
	    {"text" : "CTS", "id" : 11000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "CTS-V", "id" : 21000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "DTS", "id" : 31000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Escalade", "id" : 41000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Escalade - ESV", "id" : 51000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Escalade - EXT", "id" : 61000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "SRX", "id" : 71000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "STS", "id" : 81000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "STS-V", "id" : 91000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "XLR", "id" : 111000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "XLR-V", "id" : 121000, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    }]
	},
	{"text" : "Jaguar", "id" : 400, "leaf" : false, "cls" : "folder", "children" : [ 
	    {"text" : "S-Type", "id" : 11, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "X-Type", "id" : 22, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "XJ-Series", "id" : 33, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "XK-Series", "id" : 44, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    }]
	},
	{"text" : "Maserati", "id" : 1000, "leaf" : false, "cls" : "folder", "children" : [
	    {"text" : "Coupe", "id" : 10200, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Grand Sport", "id" : 10300, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Quattroporte", "id" : 10400, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    }]
	},
	{"text" : "Porsche", "id" : 1000, "leaf" : false, "cls" : "folder", "children" : [
	    {"text" : "911 Carrera", "id" : 123, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "911 Carrera 4", "id" : 90, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "911 Turbo", "id" : 789, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Boxster", "id" : 56, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Cayenne", "id" : 334, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    },
	    {"text" : "Cayman", "id" : 222, "leaf" : false, "cls" : "folder", "children" : 
	        [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
	          {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
	          {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
	          {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
	          {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
	        ]
	    }]
	}
	];

    // shorthand
    var Tree = Ext.tree;

    var tree = new Tree.TreePanel(
    	//'tree', 
    	{
		title:'选项列表',
		width: 200,
		height:300,
		root:root,
		animate: true,//是否动画
		useArrows: true,//树形目录使用visit中树目录显示效果(三角形代替+号)  
		rootVisible : false,//顶节点是否显示、设置成false后顶节点的子节点就作为顶节点（可以有多个子节点作为顶节点）
        enableDD:false,
		loader: new Tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode()
		lines: true,
		selModel: new Ext.tree.MultiSelectionModel(),
	        containerScroll: false
	    });

    // set the root node
    var root = new Tree.TreeNode({
        text: 'Autos',
        draggable:false,
        id:'source'
    });

    tree.setRootNode(root);

	var objLoader = tree.getLoader();
    for(var i = 0, len = json.length; i < len; i++) {
        root.appendChild(objLoader.createNode(json[i]));
    }
    
    tree.render(document.body);
    root.expand(); 
    
});
// --></mce:script>
</head>
<body>
<div id="tree"></div>
</body>
</html>
[JAVASCRIPT][EXTJS]直接用JSON创建树形控件（Ext.tree.TreePanel ）

继续阅读

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

无组件上传图片到数据库中，最完整解决方案

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

vue-cli简介（中文翻译）

Ajax发送和获取json数据到Spring mvc 1.spring mvc后端2.web前段

layui多任务上传添加进度条

JSONObject包导入异常 java.lang.NoClassDefFoundErrorweb项目的导入包的问题
