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

uttx8gqw  于 2023-03-16  发布在  Java
关注(0)|答案(3)|浏览(150)

我正在开发一个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'
        }
        ...
        ]
    }
}

我想显示一个工具提示时,鼠标在节点上,但它是行不通的。

wz3gfoph

wz3gfoph1#

Ext.list.Treeqtipqtitle配置似乎存在问题。
text配置中传递html现在可以工作了。
例如<span title="Homework qtip">Homework</span>
这里是一个例子,我已经尝试了treelist配置。
https://fiddle.sencha.com/#view/editor&fiddle/2b03

ne5o7dgx

ne5o7dgx2#

我知道这是很久以前的事了。下面是在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/#view/editor&fiddle/3n2r
奇怪的是,海王星的图标,脆主题是坏了-不知道为什么。

toe95027

toe950273#

让我知道这是否可行。我还没有玩过很多树,但你可以试试这是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;
            }
        }
        ...
        ]
    }
}

相关问题