Extjs4--Ext.tree.Panel实现可选择树

来源：互联网发布：新网域名怎么设置ip 编辑：程序博客网时间：2024/04/28 15:14

1.说明

最近项目中要求创建一个可以选择的Tree，特此总结一下，大家一起学习。

2.源码

<!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"><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" type="text/css" href="../resources/css/ext-all-debug.css" /><title>Insert title here</title><script type="text/javascript">Ext.onReady(function(){        //menu数据          var data = [{"allowDelete":false,"allowDrag":false,"allowDrop":false,"allowEdit":false,"checked":false,              "children":  [{"allowDelete":false,"allowDrag":false,"allowDrop":false,"allowEdit":false,"checked":false,"children":null,"expanded":false,"hidden":null,"href":null,"hrefTarget":null,"icon":null,"iconCls":"node","id":"26","infoMap":null,"leaf":true,"text":"查询所有用户"},                {"allowDelete":false,"allowDrag":false,"allowDrop":false,"allowEdit":false,"checked":false,"children":null,"expanded":false,"hidden":null,"href":null,"hrefTarget":null,"icon":null,"iconCls":"node","id":"27","infoMap":null,"leaf":true,"text":"删除用户"}],              "expanded":true,"hidden":null,"href":null,"hrefTarget":null,"icon":null,"iconCls":"node","id":"deviceSystem","infoMap":null,"leaf":false,"text":"用户管理"},                {"allowDelete":false,"allowDrag":false,"allowDrop":false,"allowEdit":false,"checked":false,                "children":[{"allowDelete":false,"allowDrag":false,"allowDrop":false,"allowEdit":false,"checked":false,"children":null,"expanded":false,"hidden":null,"href":null,"hrefTarget":null,"icon":null,"iconCls":"node","id":"37","infoMap":null,"leaf":true,"text":"查询所有设备"},                {"allowDelete":false,"allowDrag":false,"allowDrop":false,"allowEdit":false,"checked":false,"children":null,"expanded":false,"hidden":null,"href":null,"hrefTarget":null,"icon":null,"iconCls":"node","id":"38","infoMap":null,"leaf":true,"text":"更新设备"}],                "expanded":true,"hidden":null,"href":null,"hrefTarget":null,"icon":null,"iconCls":"node","id":"emailServers","infoMap":null,"leaf":false,"text":"设备管理"}        ];         var treeStore= Ext.create('Ext.data.TreeStore', {            autoLoad: true,            proxy: {            //数据来自于内存                  type: 'memory',                data: data            },        root: {        expanded: true        }        }); /***   * 选中树节点状态变化调用该函数   * 【全选】，【取消全选】操作在这里实现   */  function onCheckchange(node, checked, eOpts){       //如果不是叶子节点   if(!node.isLeaf()){   //扩展,设置为选中状态   node.expand();    node.data.checked = checked;   node.eachChild(function(child){   //设置每一个子节点选中状态，并更新画面显示   child.data.checked = checked;    child.triggerUIUpdate();   });   }    };   //确认按钮   var confirm = Ext.create('Ext.button.Button', {            text: '确认',            handler: onSubmit       });   //树面板       var treePanel = Ext.create('Ext.tree.Panel',{    stripeRows: true,   border:0,   width:300,   height: 250,   style: {       borderRight: 'none'   },   rootVisible: false,           store: treeStore,    useArrows: true,            tbar: {                items: [{                    xtype: 'tbspacer',                    flex: 1                    },                confirm                ]            },            listeners:{            checkchange:onCheckchange            }        });                /***  * 确认事件处理函数。  */          function onSubmit(){        //获取树中所有选择的节点        var records = treePanel.getView().getChecked();        var names = [];        Ext.Array.each(records, function(rec){        //只保存子节点的数据        var leaf = rec.get('leaf');        if(leaf){        var text = rec.get('text');        names.push(text);        }        });        var nameStr = names.join('<br />');        Ext.Msg.alert('提示','您选择了：<br />'+nameStr);    };       //显示Window    Ext.create('Ext.window.Window', {        title: '可选择树展示',        height: 260,        width: 300,        layout: 'fit',        items: [        treePanel        ]      }).show();});</script></head><body></body></html>

3.运行效果：

点击父节点，可以同时选中其下所有的子节点。实现【全选】【取消全选】的功能。

4.特别说明

当我们向后台请求数据时，需要要向后台传递一些自定义的参数。

对于Ext.data.Store，我们可以指定param。

但Ext.data.TreeStore则不同，指定param实验后无效。

Ext.create('Ext.data.TreeStore',{    //nodeParam是节点参数，注意这个是参数名，defaultRootId是参数值。    nodeParam : 'roleId',    defaultRootId : roleId});

0 0