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框架中使用renderer方法在列上处理它。

以下是使用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 来显示图标/按钮，并与听众一起处理事件。

示例小提琴： https://fiddle.sencha.com/#view/editor&fiddle/28qm

EXTJS创建自定义树面板

2 个答案: