EXTJS 创建自定义树面板

Question

我正在使用 EXTJS，我想创建我的 TreePanel，右侧还有一个图标，该图标将设置为指示某些内容已更改。我很难做到这一点，因为我不确定在哪里可以修改这些属性。单独使用 HTML 会很容易，但显然这个框架很有用，我需要将这些更改集成到其中。

谢谢，旦

Answer 1

我已经解决了问题。您可以将 html 嵌入到商店的文本字段中。

Ext.define('MyApp.store.Navigation', {
extend: 'Ext.data.TreeStore',
alias: 'store.navigation',

rootData: {
    text: 'Navigation Bar',
    expanded: true,
    children: [
        {
            text: 'Parts',
            children: [
                { leaf:true, itemId:'addPart', text: 'Add new part' },
        { leaf:true, itemId:'manageParts', text: 'Manage Parts <b>here</b>' },
            ]
        },
    {
            leaf:true, itemId:'announcements', text: 'Announcements'
        }
    ]
},

constructor: function (config) {
    // Since records claim the data object given to them, clone the data
    // for each instance.
    config = Ext.apply({
        root: Ext.clone(this.rootData)
    }, config);

    this.callParent([config]);
}

});

可能是一个糟糕的解决方案，但可以完成工作。

Answer 2

是的，可以在 ExtJS 框架中使用列上的渲染器方法来处理它。

下面是我将如何使用 ExtJS 6 实现它。0.x:

Ext.create('Ext.container.Viewport', {
    layout: 'fit',

    items: [{
        xtype: 'container',
        scrollable: 'y',
        flex: 1,

        layout: {
            type: 'hbox',
            alignt: 'stretchmax'
        },

        items: [{
            xtype: 'treepanel',
            rootVisible: false,
            flex: 1,

            store: {
                type: 'tree',
                parentIdProperty: 'parentId',

                root: {
                    text: 'Navigation Bar',
                    expanded: true,
                    children: [{
                        text: 'Parts',
                        children: [{
                            leaf: true,
                            itemId: 'addPart',
                            text: 'Add new part',
                            changed: true
                        }, {
                            leaf: true,
                            itemId: 'manageParts',
                            text: 'Manage Parts',
                            changed: false
                        }, ]
                    }, {
                        leaf: true,
                        itemId: 'announcements',
                        text: 'Announcements',
                        changed: true
                    }]
                }
            },

            columns: [{
                text: 'Code',
                dataIndex: 'codigo',
                align: 'left'
            }, {
                xtype: 'treecolumn',
                text: 'Description',
                dataIndex: 'text',
                flex: 1
            }, {
                text: 'Edited',
                iconCls: 'x-fa fa-edit',
                align: 'center',
                flex: 1,
                renderer: function (f, grid, record) {
                    if(record.get('changed') === true) {
                        return "Changed Icon here"
                    }
                    else {
                        return "Not changed icon here";
                    }
                }
            }]
        }]
    }]
});

有了它，您可以轻松地管理商店中的数据，并可以轻松地更新商店中的数据。 ExtJS 将负责呈现列的给定配置。

您还可以使用 actioncolumn 来显示 icons/buttons 并与侦听器一起处理事件。

示例 Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/28qm

EXTJS 创建自定义树面板

EXTJS creating custom tree panel

extjs

treepanel