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

您可以通过renderer的gridcolumn内的html标记来实现此功能。

我 FIDDLE ，我在html config中使用renderer标记创建了一个演示。希望这能帮助您达到您的要求。

<强> 更新

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

对于我曾为之工作的设计而言并不完全相同。我使用了font-awesome作为图标并将css用于虚线边框。

CODE SNIPPET

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>

*注意我只使用静态html实现 Beto Carlx 。您可以在渲染器函数内部使用动态逻辑。

Answer 2

我有一个部分解决方案，唯一的问题是extjs不喜欢嵌套网格ou treepanels。事件重叠，它给出了一些控制台错误：“未捕获的TypeError：无法读取属性'isGroupHeader'为null”。

以下是FIDDLE

      var CreateTree = function(){

          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}
               ] }
             ]
           }
         });

         var tree = Ext.create('Ext.tree.Panel', {
            width: 200,     
            store: store,
            rootVisible: false     
         });     
         tree.render('myDiv');       

    }

    renderer: function (val, metadata, record) {

            var recordName = record.get('name');

            if (recordName === "Beto Carlx") {
                setTimeout(CreateTree, 300);                 
                return "<span id=myDiv ></span>"; 
            }                

            return recordName;
     }

“如果它有效，它不是傻瓜！”

如何渲染树

2 个答案: