Extjs4显示禁用按钮的工具提示

时间:2012-01-09 06:10:40

标签: extjs extjs4

当我禁用按钮时,它的工具提示也会禁用。有没有办法显示工具提示,即使按钮被禁用。

//create my button
       var myButton = Ext.create('Ext.Button', {
            tooltip :  'my Button Tooltip Text',
            id : 'my-button ',
            iconCls : 'star-icon',
            handler: Ext.Function.pass(_rmp.mediaManager.myButtonFunction, this)
        });

 //disable my button
    Ext.getCmp('my-button').disable();

编辑: 对于其他浏览器(chrome,safari,opera)工具提示按预期工作,它在firefox上没有按预期工作(我使用的是8.0.1版)。

1 个答案:

答案 0 :(得分:3)

@jeewiya

默认情况下,ExtJS框架会在禁用按钮上显示工具提示。这是我在重置按钮上的内容:

{
        text: 'Reset',
        tooltip :  'my Button Tooltip Text',
            id : 'my-button ',
        handler: function() {
            this.up('form').getForm().reset();
        }
}

并且,下图显示即使在禁用“重置”按钮后,提示也会出现 Tooltip on disabled button

如果您想试用我的示例,这里是我使用ExtJS 4.0.7测试的完整代码,并且按预期工作:

Ext.onReady(function(){

Ext.tip.QuickTipManager.init();

var form = Ext.create('Ext.form.Panel', {

    renderTo: Ext.getBody(),

    title: 'Simple Form',
    bodyPadding: 5,
    width: 350,

    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },

    // The fields
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name',
        name: 'first',
        allowBlank: false
    },{
        fieldLabel: 'Last Name',
        name: 'last',
        allowBlank: false
    }],

    // Reset and Submit buttons
    buttons: [{
        text: 'Reset',
        tooltip :  'my Button Tooltip Text',
        id : 'my-button ',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }, {
        text: 'Submit',
        formBind: true, 
        disabled: true,
        handler: function() {
            Ext.getCmp('my-button ').disable();
        }
    }],
    renderTo: Ext.getBody()
});



});