Extjs Ext.TreePanel

TreePanel 简单实例。

 <link  rel="stylesheet"  href="Js/ext-4.2/resources/css/ext-all-neptune.css"/>
    <script src="Js/jQuery/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="Js/ext-4.2/ext-all-dev.js" type="text/javascript"></script> 

    <script type="text/javascript">

        var tree;
        $(document).ready(function() {

            //Ext.create(‘Ext.tree.Panel‘, {  });

            tree = new Ext.tree.TreePanel({
                renderTo: ‘tree1‘,
                title: ‘Simple Tree‘,
                multiSelect: true,
                width: 200,
                height: 450,
                viewConfig: {
                    onCheckboxChange: function(e, t) {
                        var item = e.getTarget(this.getItemSelector(), this.getTargetEl()), record;

                        if (item) {
                            record = this.getRecord(item);
                            var check = !record.get(‘checked‘);
                            //getSelectedNodes()
                            record.set(‘checked‘, check);
                            if (check) {
                                record.bubble(function(parentNode) {
                                    parentNode.set(‘checked‘, true);
                                });
                                record.cascadeBy(function(node) {
                                    node.set(‘checked‘, true);
                                });
                                //                                record.expand();  联动效果 自动收起 自动展开
                                //                                record.expandChildren();
                            } else {
                                //                                record.collapse();
                                //                                record.collapseChildren();
                                record.cascadeBy(function(node) {
                                    node.set(‘checked‘, false);
                                });
                                record.bubble(function(parentNode) {
                                    var childHasChecked = false;
                                    var childNodes = parentNode.childNodes;
                                    if (childNodes || childNodes.length > 0) {
                                        for (var i = 0; i < childNodes.length; i++) {
                                            if (childNodes[i].data.checked) {
                                                childHasChecked = true;
                                                break;
                                            }
                                        }
                                    }
                                    if (!childHasChecked) {
                                        parentNode.set(‘checked‘, false);
                                    }
                                });

                            }
                        }
                    }
                },
                root: {
                    text: ‘Root‘,
                    expanded: true, //是否展开子节点，默认为false
                    checked: true,
                    children: [
                                { id: ‘1‘, text: ‘Child 1‘, checked: true, leaf: true },
                                { id: ‘2‘, text: ‘Child 2‘, checked: true, leaf: true },
                                { id: ‘3‘, text: ‘Child 3‘, checked: true, expanded: true, children: [{ id: ‘4‘, text: ‘Grandchild‘, checked: true, leaf: true}] }
                              ]
                }
            });

            //窗体
            var win = new Ext.Window({
                title: ‘窗口‘,
                width: 476,
                height: 574,
                resizable: true,
                modal: true,
                closable: true,
                maximizable: true,
                minimizable: true,
                items: tree
            });
            win.show();

            var attr = tree.getChecked();

            for (var le = 0; le < attr.length; le++) {
                var json = eval(attr[le].getData());　　　　　　　　　　　　json.text;
            }

        }); </script>

root：是树的根节点。

checked: true 树有选择框。

onCheckboxChange：设置树连及效果，父级选中后 所有子集也全部选中。

getChecked()：获取所有选择的 树节点数据。

getChecked()下的getData()获取每个节点的数据 。