溢出按钮上的Extjs工具提示

Question

我正在尝试在extjs溢出按钮上添加工具提示，但我找不到办法做到这一点。在文档中也没有提到它。有没有人能够做到这一点？要么是这样，要么改变按钮的文本

我找到了

overflowText: 'More >'

但这似乎不起作用

Answer 1

您可以在工具栏的afterrender事件期间向溢出按钮添加工具提示。目标元素在this.layout.overflowHandler.menuTrigger.el事件中为afterrender。

工作jsFiddle http://jsfiddle.net/gJjTY/（溢出图标位于工具栏的右下方，由于缺少css，图标不会呈现）

Ext.create('Ext.toolbar.Toolbar', {
    renderTo: document.body,
    width   : 300,
    margin  : '5 0 0 0',
    layout  : {overflowHandler: 'Menu' },
    items   : [
        {
            text   : 'This is a Button',
            tooltip: 'This is a tip',
        },
        {
            text   : 'This is another button',
        },
        {
            text : "this is yet another button!"
        }
    ],
    listeners: {
        afterrender: function(view){
            var me = this;
            console.log(me);
            Ext.Function.defer(function(){
                Ext.create('Ext.tip.ToolTip', {
                    target       : me.layout.overflowHandler.menuTrigger.el,
                    anchor       : 'left',
                    dismissDelay : 0,
                    showDelay    : 0,
                    autoHide     : true,
                    html         : "This is a tooltip!"
                });
            }, 100);
        }
    }
});

Ext.onReady(function(){
    Ext.QuickTips.interceptTitles = true;
    Ext.QuickTips.init();
});