如何渲染树

Question

我有一个网格,如果名称等于"Beto Carlx",我想添加一棵树有谁知道怎么做到这一点？先感谢您!

这是我的代码:LIVE DEMO

columns: [{
    header: 'NAME',
    renderer: function(val, metadata, record) {
        var recordName = record.get('name');
        if (recordName === "Beto carlx") {
            return "TEST";
        }

        return recordName;
    },
    dataIndex: 'name',
    }],

我正在尝试使用这个简单的树:

var store = Ext.create('Ext.data.TreeStore', {
root: {
    expanded: true,
    children: [
        { text: "Beto carlx", expanded: true, children: [
            { text: "item 1", leaf: true },
            { text: "item 2", leaf: true}
        ] }
    ]
}
});

Ext.create('Ext.tree.Panel', {
  width: 200,
  height: 150,
  store: store,
  rootVisible: false,
  renderTo: Ext.getBody()
});

Answer 1

您可以通过的html内部标签来实现此功能。renderergridcolumn

在这个FIDDLEhtml中，我使用配置中的标签创建了一个演示renderer。希望这将帮助您实现您的要求。

更新

您可以使用cellclick将collapseexpand函数放入 ExtJS 组件或控制器中。

对于设计，我所做的工作并不完全相同。我使用font-awesome作为图标，并使用 css 作为虚线边框。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.define('UserModal', {
            extend: 'Ext.data.Model',
            fields: ['name']
        });

        Ext.create('Ext.data.Store', {
            storeId: 'gridStore',

            fields: ['name'],
            groupField: 'status',
            data: [{
                "name": "Henry Watson"
            }, {
                "name": "Lucy"
            }, {
                "name": "Mike Brow"
            }, {
                "name": "Mary Tempa"
            }, {
                "name": "Beto Carlx"
            }]
        });

        // Setting up the Grid
        Ext.create('Ext.grid.Panel', {

            title: 'Render Treen inside grid cell',

            store: 'gridStore',

            columns: [{
                header: 'NAME',
                renderer: function (val, metadata, record) {
                    if (val === "Beto Carlx") {
                        return `<ul  class="root-tree">
                            <li><i class="fa fa-minus-square"></i> <span>Beto carlx</span>
                                <ul class="tree-item">
                                  <li class="tree-item-li">item 1</li>
                                  <li class="tree-item-li">item 1</li>
                                </ul>
                            </li>
                        </ul>`
                    }

                    return val;
                },
                dataIndex: 'name',

            }],
            listeners: {
                cellclick: function (grid, td, cellIndex, record, tr, rowIndex, e) {
                    var list,
                        styles;

                    if (e.getTarget('ul.root-tree', 3)) {
                        list = td.querySelector('ul.tree-item');
                        var icon = td.querySelector('i.fa').classList;
                        if (icon.contains('fa-minus-square')) {
                            icon.remove('fa-minus-square');
                            icon.add('fa-plus-square');
                            list.style.display = 'none';
                        } else {
                            icon.remove('fa-plus-square');
                            icon.add('fa-minus-square');
                            list.style.display = 'block';
                        }
                        // styles = window.getComputedStyle(list);
                        //  = (styles.getPropertyValue('display') === 'none' ? 'block' : 'none');
                    } else if (e.target.className == 'tree-item-li') {
                        alert(e.getTarget('li.tree-item-li').innerText)
                    }
                }
            },

            height: 300,

            renderTo: document.body
        });

    }
});

CSS部分

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    .root-tree {
        cursor: pointer;
        color: #5c5c5c;
        font-weight:bold;
    }

    .root-tree span:hover {
        color: green;
    }

    ul.tree-item,
    ul.tree-item ul {
        list-style: none;
        margin: 0px 10px;
        padding: 0;
    }

    ul.tree-item ul {
        margin-left: 10px;
    }

    ul.tree-item li {
        margin: 0;
        padding: 0 7px;
        line-height: 20px;
        color: #5c5c5c;
        font-weight: bold;
        border-left: 1px dashed rgb(100, 100, 100)
    }

    ul.tree-item li:last-child {
        border-left: none;
    }

    ul.tree-item li:before {
        position: relative;
        top: -0.3em;
        height: 1em;
        width: 12px;
        color: white;
        border-bottom: 1px dashed rgb(100, 100, 100);
        content: "";
        display: inline-block;
        left: -7px;
    }

    ul.tree-item li:last-child:before {
        border-left: 1px dashed rgb(100, 100, 100)
    }

</style>

*注意我只为Beto Carlx实现了静态 html。您可以将逻辑动态地放在渲染器函数内部。