How to render tree

Question

I have a grid and I would like to add a tree if a name is equal to “Beto Carlx” Does anyone know how to make this happen? Thank you in advance!

Here’s my code: 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',
    }],

I'm trying to use this simple tree:

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

You can be achieve this functionality by html tag inside of renderer of gridcolumn.

I this FIDDLE, I have created a demo using html tag inside of renderer config. Hope this will help you to achieve your requirement.

---

Update

You can use cellclick to put collapseexpand function inside of ExtJS component or controller.

For design pas I have worked for that not fully same. I have used font-awesome for icons and put css for dashed border.

---

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 part

<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>

*Note I have implemented only for Beto Carlx with static html. You can put your logic with dynamic inside of renderer function.