转载：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来实现。

最新文章

  1. IDEA 配置 tomcat的数据源
  2. 【Redis】：Jedis 使用
  3. ubuntu 使用中的一些问题汇总
  4. .NET MEF入门级例子
  5. Thinkphp源码分析系列（六）–路由机制
  6. Redis在win7上的可视化应用
  7. Read4096
  8. Git and GitHub
  9. Linuxshell脚本之if条件判断
  10. uva208 - Firetruck
  11. Windows内存管理和linux内存管理
  12. HDU 1160 FatMouse&#39;s Speed（DP）
  13. poj 1080 dp如同LCS问题
  14. Json的反序列化 .net Newtonsoft.Json
  15. eclipse 设置编辑窗口字体和背景颜色
  16. 新一代的昆明网络seo优化技巧
  17. mysql 开发进阶篇系列 19 MySQL Server(innodb_flush_log_at_trx_commit与sync_binlog)
  18. Django+Xadmin打造在线教育系统(六)
  19. Django框架（六）
  20. 将struct转为map

热门文章

  1. BZOJ 1014 火星人prefix
  2. About javascript language
  3. jquery升级换代
  4. Qt中暂停线程的执行（利用QMutex，超级简单明了）
  5. 图论（网络流）：[CTSC2001]终极情报网
  6. Delphi 重写控件的一个例子。
  7. 用Processon在线绘制UML的尝试
  8. [Audio processing] 常见语音特征 —— LPC
  9. hdu 4289 最小割，分拆点为边
  10. poj2245