Как добавить панель дерева в столбец панели сетки в extjs

Question

У меня есть сетка панели. Я хочу добавить панель дерева к столбцу в этой панели сетки.

Сетка Панель

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields:[ 'name', 'email', 'phone'],
    data: [
        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
        { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

Магазин дерева

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        children: [
            { text: 'detention', leaf: true },
            { text: 'homework', expanded: true, children: [
                { text: 'book report', leaf: true },
                { text: 'algebra', leaf: true}
            ] },
            { text: 'buy lottery tickets', leaf: true }
        ]
    }
});

Например, Если я хочу, чтобы этот магазин дерева попал под Name: Lisa, т.е. дерево расширяется, когда мы нажимаем на Лизу. Как мы можем это сделать.

Спасибо.

Answer 1

То, что вы ищете, это treegrid.

Для современного инструментария отметьте modern treegrid .

Для классического инструментария отметьте classic treepanel с несколькими столбцами.