zoukankan      html  css  js  c++  java

  • Ext4 简单的treepanel

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

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

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

    html部分：

    [html] view plaincopy在CODE上查看代码片派生到我的代码片
    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.   
    13. <body>  
    14.     <div id="subMenu"></div>  
    15. </body>  
    16. </html>  


    js部分：

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


    json数据源：

    [plain] view plaincopy在CODE上查看代码片派生到我的代码片
    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来实现。
  • 相关阅读:
    Golang 版本　支付宝支付SDK　app支付接口2.0
    用 Certbot-auto 在 letsencrypt.org申请免费 SSL 证书实现 HTTPS
    Go类型断言demo
    签名算法
    golang cron定时任务简单实现
    Chapter Zero 0.2.2 内存
    Linux-系统目录结构
    Linux-关于Bash
    Chapter Zero 0.2.1 执行运算与判断的CPU
    Chapter Zero 0.1.4 计算机上常用的计算单位
  • 原文地址：https://www.cnblogs.com/tianma3798/p/3532519.html
Copyright © 2011-2022 走看看