Enable and disable ExtJS tooltip from toolbar items
In my toolbar
there is checkbox
used for enabling and disabling tooltip
. If the checkbox
is checked then I should enable tooltip
an开发者_JS百科d it is working if not then I should disable it also working. After disabling tooltip
, when click on toolbar
not on any item in the toolbar
then also it is enabling.
toogleTooltip
is ahandler
ofcheckbox
function toggleTooltip() {
debugger;
if (Ext.getCmp("msai_tool_tip").checked) {
Ext.QuickTips.enable();
while (!Ext.QuickTips.isEnabled())
Ext.QuickTips.enable();
} else {
Ext.QuickTips.disable();
while (Ext.QuickTips.isEnabled())
Ext.QuickTips.disable();
}
}
This is my toolbar creation code:
Ext.QuickTips.init();
var tb = new Ext.Toolbar({
id: 'form_menu_bar',
renderTo: Ext.get('newproducttitle').dom,
items: [{
tooltip: {
text: "Click on this button to generate the template and save it in server.",
title: "Save",
xtype: "quicktip"
},
iconCls: 'msai_save_template',
handler: generateTemplate
}, {
tooltip: {
text: "Click on this button to generate the template.",
title: "Save to clipboard",
xtype: "quicktip"
},
iconCls: 'msai_save_clipboard',
handler: generateTemplateClipboard
}]
});
Please suggest some solution so that I should not show tooltip
, if user click on toolbar not in any item.
Please find the below fiddle to check working example: https://fiddle.sencha.com/#view/editor&fiddle/2c7k
Code snippet:
Ext.QuickTips.init();
var tb = new Ext.Toolbar({
renderTo: document.body,
width: 600,
height: 100,
items: [{
// xtype: 'button', // default for Toolbars, same as 'tbbutton'
text: 'Button',
tooltip: 'button'
}, {
xtype: 'splitbutton', // same as 'tbsplitbutton'
text: 'Split Button',
tooltip: 'Split Button'
}, {
xtype: 'checkbox',
boxLabel: 'enable tooltip',
checked: true,
listeners: {
check: function (checkbox, newValue, oldValue) {
if (newValue) {
Ext.QuickTips.enable();
} else {
Ext.QuickTips.disable();
}
}
}
}]
});
精彩评论