转载：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. Xamarin Mono错误： unable to find explicit activity class

    unable to find explicit activity class在android开发很常见,网上一般是java的解决办法,对我们这些xamariner就无语了. xamarin中用attr ...

  2. Oracle问题解决（sqlplus无法登陆）

    命令行 sqlplus 无法登陆,常常是用户名/密码错误.监听配置错误或未启动.数据库服务名丢失等等原因. 用户名/密码错误 找到自己设的密码 这全靠自己创建数据库实例时,备份或记住相关信息 若最后没 ...

  3. 【MySQL】囧，mysql忘记用户密码

    Ubuntu(12.04)中安装的mysql,忘记记录用户名密码了,不想重装,有木有重设密码的方法? 有位园友给出了解决方法,在mysql 5.6.23上验证没有问题. 详情用力戳这里! 1.结束当前 ...

  4. Hadoop完全分布式集群安装

    转载请注明原地址,谢谢! 本文目的是教大家配置Hadoop的完全分布式的集群,除了完全分布式还有两种分别是单节点和伪分布式部署.伪分布式只需要一台虚拟机,配置的东西也相对较少,大多用作代码调试,大家稍 ...

  5. android.support.v7.widget.Toolbar　中menu图标不显示问题

    <?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http:// ...

  6. C#调用webservers实现天气预报

    一:截图 二:实现步骤 1.引入Web服务.在VS中项目上右击→添加服务引用. 2.在弹出的添加服务引用窗口,录入web服务地址和引用后的命名空间. 三:源代码 using System; using ...

  7. Single Number III——LeetCode

    Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...

  8. Sort List ——LeetCode

    Sort a linked list in O(n log n) time using constant space complexity. 链表排序,要求时间复杂度O(nlgn),我写的归并排序. ...

  9. 数据结构——foodfill 八连块问题

    Description Due to recent rains, water has pooled in various places in Farmer John's field, which is ...

  10. Nodejs in Visual Studio Code 12.构建单页应用Scrat实践

    1.开始 随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away ...