如何在ExtJS中设置树列表的工具提示

Question

我正在开发一个ExtJs应用程序。我想使用如下的树列表:

{
    xtype: 'treelist',
    bind: '{navimgation}',
    ...
}

我的模型中的navimgation如下:

navimgation: {
    type: 'tree',
    root: {
        children: [{
            text: 'Node1',
            leaf: true,
            qtip: 'My qtip 1'
        },{
            text: 'Node2',
            leaf: true,
            qtip: 'My qtip 2'
        }
        ...
        ]
    }
}

我想显示一个工具提示，当鼠标在节点上，但它不工作

Answer 1

看起来Ext.list.Tree、qtip和qtitle配置存在问题。

在text配置中传递html现在可以工作了。

。<span title="Homework qtip">Homework</span>

这里是一个例子，我已经尝试了treelist配置。

https://fiddle.sencha.com/视图/editor&小提琴/2 b03

Answer 2

我知道这是很久以前的事了。下面是另一个在ExtJs 7.6.0中工作的解决方案:

var treeList = Ext.create({
    xtype: 'treelist',
    store: {
        root: {
            id: 1,
            expanded: true,
            children: [{
                id: 2,
                text: 'detention',
                leaf: true,
                iconCls: 'x-fa fa-frown-o',
                qtitle: 'Detention qtip',
                qtip: 'Detention qtip'
            }, {
                id: 3,
                text: '<span title="Homework qtip">Homework</span>',
                expanded: true,
                iconCls: 'x-fa fa-folder',
                qtitle: 'Homework qtip',
                children: [{
                    id: 4,
                    text: '<span title="Book Report qtip">Book Report</span>',
                    leaf: true,
                    iconCls: 'x-fa fa-book',
                    qtip: 'book report qtip'
                }, {
                    id: 5,
                    text: 'algebra',
                    leaf: true,
                    iconCls: 'x-fa fa-graduation-cap',
                    qtip: 'algebra qtip'
                }]
            }, {
                id: 6,
                text: 'buy lottery tickets',
                leaf: true,
                iconCls: 'x-fa fa-usd',
                qtip: 'buy lottery tickets qtip'
            }]
        }
    },
    renderTo: Ext.getBody()
});
var tip = Ext.create('Ext.tip.ToolTip', {
    // The overall target element.
    target: treeList.el,
    // Each grid row causes its own separate show and hide.
    delegate: '.x-treelist-row-over',
    // Moving within the row should not hide the tip.
    trackMouse: false,
    // Render immediately so that tip.body can be referenced prior to the first show.
    renderTo: Ext.getBody(),
    listeners: {
        // Change content dynamically depending on which element triggered the show.
        beforeshow: function updateTipBody(tip) {
            //debugger;
            function getParentElem(elem) {
                if (!elem) {
                    return null;
                } else if (elem.getAttribute('data-recordid')) {
                    return elem;
                } else {
                    return getParentElem(elem.parentNode);
                }
            }
            //debugger;
            var elem = getParentElem(tip.triggerElement);
            if (!elem) {
                return;
            }
            var store = treeList.getStore();
            var dataRecordId = elem.getAttribute("data-recordid");
            console.log(`dataRecordId = ${dataRecordId}`);
            var internalId = parseInt(dataRecordId);
            console.log(`Internal id = ${internalId}`);
            var node = store.getByInternalId(internalId);
            var qtip = node.data.text;
            if (node.data.qtip)
                qtip = node.data.qtip;
            //console.log(node.data.qtip);
            tip.update(qtip);
            //debugger;
            // debugger;
        },
    }
});

https://fiddle.sencha.com/视图/editor&小提琴/3 n2r

奇怪的是，海王星，脆主题的图标是坏的-不知道为什么。

Answer 3

让我知道这是否有效。我还没怎么用过树，但你可以试试JSFiddle或你的代码。

navimgation: {
    type: 'tree',
    root: {
        children: [{
            text: 'Node1',
            leaf: true,
            renderer: function (val, meta, rec) {
                    meta.tdAttr = 'data-qtip="This is my tooltip"';
                            return val;
            }
        },{
            text: 'Node2',
            leaf: true,
            renderer: function (val, meta, rec) {
                    meta.tdAttr = 'data-qtip="This is my tooltip"';
                            return val;
            }
        }
        ...
        ]
    }
}