Extjs4.0学习笔记三(Tree应用)
<div class="Section0"> Extjs4.0 学习笔记三一：页面效果
http://dl.iteye.com/upload/attachment/569470/bf7b36db-d559-3250-9b6a-b99209a1ef5d.jpg
二：页面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accordion Layout</title>
<!-- Ext -->
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
<script type="text/javascript" src="ext4/bootstrap.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{
text: "detention", leaf: true
},
{
text: "homework", expanded: true,
children: [
{
text: "book report", leaf: true
},
{
text: "alegrbra", leaf: true
}
]},
{
text: "buy lottery tickets", leaf: false
}
]}});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
</body>
</html>
三 总结
通过本次例子可以学习总结到以下知识点：
从代码中可以看出创建一个Tree，大概分两部分。一创建一个TreeStore，二创建一个面板。
官网API：
The TreePanel provides tree-structured UI representation of tree-structured data. A TreePanel must be bound to a Ext.data.TreeStore. TreePanel's support multiple columns through the columns configuration.
可以理解为TreePanel即为显示的页面面板，而TreeStore是数据仓库，面板效果的显示是依赖数据仓库的
页:
[1]