折叠式项目标题的Extjs4显示工具提示

Question

有没有什么方法可以为Extjs accordion项目标题添加工具提示。我正在使用树形面板作为accordion项目。

我的手风琴面板

Ext.create('Ext.Panel', {
    region: 'west',
    split: true,
    width: '20%',
    collapsible: true,
    title: 'Accordian',
    iconCls: 'application-side-tree',
    layout: 'accordion',
    items: [
        Ext.create('Ext.tree.Panel', {
        id: 'tree-1',
        store: Store1,
        title: 'First item tree',
        rootVisible: false,
        layout: 'fit',
        draggable: false
    }),
        Ext.create('Ext.tree.Panel', {
        id: 'tree-2',
        store: Store2,
        title: 'Second item tree',
        rootVisible: false,
        layout: 'fit',
        draggable: false
    })
        ],
});

Answer 1

您可以使用QuickTips，例如：

var panel = Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: '80%',
    title: 'Accordian',
    layout: 'accordion',
    items: [
        Ext.create('Ext.panel.Panel', {
            title: 'First item tree',
            tooltip: 'tip 1',
            html: 'blah blah'
        }),
        Ext.create('Ext.panel.Panel', {
            title: 'Second item tree',
            tooltip: 'tip 2',
            html: 'blah blah'
        })
    ],
    height: 200
});

panel.items.each(function(p) {
    Ext.create('Ext.tip.ToolTip', {
        target: p.header.id,
        html: p.tooltip
    });
});

Ext.QuickTips.init();

工作示例：http://jsfiddle.net/r4tt5/