Extjs4.0学习笔记三(Tree应用)

                       Extjs4.0 学习笔记三

一:页面效果


Extjs4.0学习笔记三(Tree应用)
 

 二:页面代码

<!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是数据仓库,面板效果的显示是依赖数据仓库的

你可能感兴趣的:(JavaScript,tree,ExtJs)