Extjs4.0 学习笔记三
一：页面效果
二：页面代码
<!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是数据仓库，面板效果的显示是依赖数据仓库的
- 大小: 7.4 KB
分享到：
相关推荐
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式，就是Ext.create(....)，而且可以使用动态加载JS的方式来加快组件的渲染，我们再也不必一次加载已经达到1MB的ext-all.js了，本文介绍如何在EXTJS4...
ExtJS4.0开发笔记
Extjs4.0学习笔记大全.pdf，供大家学习
Extjs4.0学习笔记大全
第三讲:extjs4.0数据模型--Model(附件较大做了分包压缩大家只要下载2个包运行001就ok了) [03]EXTJS4.0数据模型-Model.001.zip (70.00M)[03]EXTJS4.0数据模型-Model.002.zip (57.37M) 第四讲:extjs4.0的数据代理-...
EXTJS4.0 开发笔记主要探讨了如何利用EXTJS4.0的MVC模式进行Web应用程序的构建，特别是员工管理系统的开发。在MVC模式下，开发过程更具有组织性和可维护性，将模型（Model）、视图（View）和控制器（Controller）...
EXTJS 4.0 学习文档 EXTJS 4.0 是一个面向开发 RIA 的 AJAX 应用，是一个用 JavaScript 写的，主要用于创建前端用户界面，是一个与后台技术无关的前端 AJAX 框架。它能够帮助我们在页面上快速而简单构建各种各样的...
EXTJS 是一个强大的JavaScript 库，专用于...EXTJS 4.0的学习涉及到了组件的创建、布局的管理、数据绑定和事件处理等多个方面，理解并熟练掌握这些知识点，能帮助开发者构建出功能强大、用户体验优秀的Web应用程序。
"Extjs4.0 Web应用开发指南(第二版)-源代码"这本书的源码部分，不仅提供了EXTJS4.0的源代码，还提供了书中实例的实现，这对于学习EXTJS4.0的实际开发流程非常有帮助。通过对照书中的讲解和源码，开发者可以更深入地...
在《ExtJs4.0 手册中文版》中，你可以找到关于ExtJS 4.0的全面介绍和详细指南。这个手册涵盖了框架的基础知识，如MVC架构、组件系统、数据绑定以及事件处理机制。此外，它还深入讲解了如何使用各种组件，如GridPanel...
Extjs 4.0中文版API
extjs4.0开发人员以及学习可以下载参考
EXTJS 4.0是一款基于JavaScript的开源前端框架，用于构建交互式的Web应用程序。它提供了一套丰富的UI组件库，支持多种浏览器，并具有良好的可扩展性。通过使用EXTJS，开发者可以更轻松地创建功能丰富、用户友好的...
ExtJS 4.0是Sencha公司开发的一款强大的JavaScript前端框架，主要用于构建富客户端Web应用程序。这个官方版本的发布标志着ExtJS在功能、性能和可维护性方面的一个重要里程碑。以下将详细介绍ExtJS 4.0中的核心概念、...
学习extjs资料，tree合成grid，很不错的视频文件，值得收藏
### Extjs4.0 学习指南核心知识点详解 #### 一、获取与安装Extjs4.0 **1.1 获取Extjs4.0** - **官方资源**: 访问官方网站 [http://extjs.org.cn/](http://extjs.org.cn/) 下载最新版本的Extjs4.0及相关文档和支持...
一款很好的适合Extjs4.0初学者学习的word文档,示例加上简单的标注说明,使你很快对Extjs4.0进入入门阶段,不可多得的文档,值得下载