转载：http://blog.csdn.net/zyujie/article/details/8208499

最近在学习Ext4，记录一些有关Ext4实现控件的方法：

Ext4的treePanel和之前3x的版本有一些差别。使用的版本是ext-4.0.7-gpl

html部分：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <link type="text/css" rel="stylesheet" href="css/index.css" />
  7. <link type="text/css" rel="stylesheet" href="resources/css/ext-all.css" />
  8. <script type="text/javascript" language="javascript" src="ext-all.js"></script>
  9. <script type="text/javascript" language="javascript" src="locale/ext-lang-zh_CN.js"></script>
  10. <script type="text/javascript" language="javascript" src="js/index.js"></script>
  11. </head>
  12. <body>
  13. <div id="subMenu"></div>
  14. </body>
  15. </html>

js部分：

[javascript] view plaincopy
  1. Ext.onReady(function(){
  2. Ext.define('Task', {
  3. extend: 'Ext.data.Model',
  4. fields: [
  5. {name: 'id',  type: 'string'},
  6. {name: 'text',  type: 'string'}
  7. ],
  8. });
  9. var store = Ext.create('Ext.data.TreeStore',{
  10. model: 'Task',
  11. proxy: {
  12. type: 'ajax',
  13. url: 'treegrid.json'    //必须要搭建个服务器才可以访问json，不然会报错。拒绝访问
  14. },
  15. reader: {
  16. type: 'json'
  17. },
  18. root: {
  19. text: 'root',
  20. id: '0',
  21. }
  22. });
  23. var menuTree = Ext.create('Ext.tree.Panel',{
  24. title: '用户管理',
  25. autoScroll:true,
  26. width: "100%",
  27. height: "100%",
  28. store: store,
  29. rootVisible: true,
  30. renderTo: 'subMenu',
  31. listeners : {
  32. 'itemclick' : function(view,record){
  33. if(record.data.leaf){
  34. alert(record.data.id);
  35. }else{
  36. if(record.data.expanded){
  37. view.collapse(record);
  38. }else{
  39. view.expand(record);
  40. }
  41. }
  42. }
  43. }
  44. });
  45. menuTree.store.load();
  46. });

json数据源：

  1. {
  2. id:'1',
  3. text:'treenode 1',
  4. expanded:true,
  5. children:[{
  6. id:'11',
  7. text:'treenode 11',
  8. leaf:true
  9. },{
  10. id:'12',
  11. text:'treenode 12',
  12. expanded:true,
  13. children:[{
  14. id:'121',
  15. text:'treenode 121',
  16. leaf:true
  17. },{
  18. id:'122',
  19. text:'treenode 122',
  20. leaf:true
  21. }]
  22. },{
  23. id:'13',
  24. text:'treenode 13',
  25. leaf:true
  26. }]
  27. }

一个简单的treepanel就出现了，至于一些拓展功能，如复选树，修改，编辑，拖动等功能，可以参照API来实现。

Ext4 简单的treepanel的更多相关文章

  1. 【ExtJS】一个简单的TreePanel

    在ExtJS中,构造一个树形结构变得很简单. 需要用到的: Ext.tree.Panel TreePanel提供树形结构的UI表示的树状结构数据. 一个TreePanel必须绑定一个Ext.data. ...

  2. linux操作系统的目录以及用户权权限的管理

    linux操作系统的目录以及对目录的操作 一: linux操作系统的目录结构   bin #可执行程序的安装目录 , 命令 boot #系统启动引导目录 dev #设备目录 etc #软件配置文件目录 ...

  3. linux大盘格式化分区

    Linux 实例的磁盘管理 对于 Linux 系统上的大磁盘,也要采用 GPT 分区格式, 也可以不分区, 把磁盘当成一个整体设备使用. 在 Linux 上一般采用 XFS 或者 EXT4 来做大盘的 ...

  4. Ext4功能和文件系统的简单功能

    Linux kernel 自 2.6.28 開始正式支持新的文件系统 Ext4. Ext4 是 Ext3 的改进版,改动了 Ext3 中部分重要的数据结构,而不只像 Ext3 对 Ext2 那样,不过 ...

  5. Extjs Ext.TreePanel

    TreePanel 简单实例. <link rel="stylesheet" href="Js/ext-4.2/resources/css/ext-all-nept ...

  6. .NET Web开发技术简单整理

    在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...

  7. ExtJs基础知识总结：Dom、IFrame和TreePanel、TabPanel（三）

    概述 ExtJs是另外一种操作封装JavaScript的类库与Jquery同类.所以对Dom的操作也是支持的,比如修改Div内Html内容等操作.有几个问题需要思考下: 1.ExtJs也支持IFram ...

  8. ExtJs4之TreePanel

    Tree介绍 树形结构,是程序开发,不可缺少的组件之一.ExtJs中的树,功能强大美观实用.功能齐全,拖拉,排序,异步加载等等. 在ExtJs4中Tree和Grid具有相同的父类,因此Grid具有的特 ...

  9. 编写简单的ramdisk（无请求队列）

    最近在研究块设备驱动的编写,看了赵磊大牛的<写一个块设备驱动>,受益匪浅,虽然能看懂里面说的,但动手写写代码还是能加深理解的,下面实现的ramdisk写的很简单,如果有错误,欢迎大牛们指正 ...

随机推荐

  1. 一种计算e的方法

    原文地址:http://hankjin.blog.163.com/blog/static/3373193720108811316123/ 原理:平均e个(0,1)之间的随机数之和会大于1.原因:n个数 ...

  2. 【Linux】鸟哥的Linux私房菜基础学习篇整理（七）

    1. test命令的测试功能.测试的标志:(1)关于文件类型的检测 test [-efdbcSpL] filename-e:该文件名是否存在:-f:该文件名是否为文件:-d:该文件名是否为目录:-b: ...

  3. Linux on Power 上的调试工具和技术

     Linux on Power 上的调试工具和技术 简介: 调试是一项主要的软件开发活动,作为应用程序开发人员,您无法避免对程序进行调试.有效的调试不仅能缩短软件开发周期,而且可以节省成本.本文简要介 ...

  4. JS JQuery Ajax 跨域 Post Soap webservice

    呵呵 最近做一些HTML5的项目, 对于前段开发, 相信大家会碰到一个常见问题, 那就是Javascript跨域访问的问题. 话不多说 直接重点 当前网站和Webservice部署在同一个domain ...

  5. .net快速创建PDF文档 by c#

    原文地址:http://www.cnblogs.com/Creator/archive/2010/03/13/1685020.html C#引用IText创建PDF文档 先引用IText    可以从 ...

  6. Windows下移动硬盘无法识别但是Mac下可以识别

    今天遇到一个问题,具体如下: 在Mac下正常使用的移动硬盘,在Windows下无法识别,打开显示"磁盘结构损坏且无法读取" 分析:Mac下既然能够正常使用,那么硬盘就应该是正常的, ...

  7. How To Create a New User and Grant Permissions in MySQL

    How to Create a New User Let’s start by making a new user within the MySQL shell: CREATE USER 'newus ...

  8. 使用 virtualenv

    关于virtualenv的资料: http://virtualenv-chinese-docs.readthedocs.org/en/latest/ 用的python3,但是搭建 Robot Fram ...

  9. Bash 字符串处理命令

    字符串长度 str="abc" echo ${#str} 查找子串的位置 str="abc" str1=`expr index $str "a&quo ...

  10. 高性能Java Web 页面静态化技术(原创)

    package com.yancms.util; import java.io.*; import org.apache.commons.httpclient.*; import org.apache ...