PDA

View Full Version : Menu not showing tooltips....



michael.prichard
26 Apr 2007, 11:32 AM
Here is my code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Toolbar with Menu</title>

<link rel="stylesheet" type="text/css" href="assets/ext-1.0/resources/css/ext-all.css" />
<!-- LIBS -->
<script type="text/javascript" src="assets/ext-1.0/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="assets/ext-1.0/adapter/yui/ext-yui-adapter.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="assets/ext-1.0/ext-all.js"></script>

<script type="text/javascript" >


Ext.onReady(function(){

var toolsMenu = new Ext.menu.Menu({
id: 'myMenu',
items: [
{text: '<b>Bold</b>', handler: onItemClick, tooltip:'tip this!'},
{text: 'Groups', handler: onItemClick},
{text: '<i>Italic</i>', handler: onItemClick}
]
});

var tb = new Ext.Toolbar('toolbar');
tb.add(
new Ext.Toolbar.Button({
text:'Search',
handler: onButtonClick
}),
{
text:'Tools',
menu: toolsMenu // assign menu by instance
},
new Ext.Toolbar.Button({
text:'Help',
handler: onButtonClick,
tooltip: {text:'This is a QuickTip with autoHide set to false and a title'}
}),
new Ext.Toolbar.Button({
text:'Logout',
handler: onButtonClick,
tooltip: 'Logout from Application',

enableToggle: true
})

);

// handlers
// functions to display feedback
function onButtonClick(btn){
Ext.Msg.alert('Button Click','You clicked the ' + btn.text + ' button.', btn.text);
}

function onItemClick(item){
Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
}

});
</script>

</head>
<html>
<body>

<div id="container">
<div id="toolbar" >
</div>
</div>

</body>
</html>


I can't get any of the tooltips to show. Any ideas?

tryanDLS
26 Apr 2007, 12:11 PM
Add this to the top of your function

Ext.QuickTips.init();

efege
26 Apr 2007, 1:13 PM
I'm using


Ext.QuickTips.init();

and tooltips are showing on toolbar buttons, but still they don't show on menu items. What syntax should I use?

tryanDLS
26 Apr 2007, 2:00 PM
There is no built-in support for tooltips on menu items, but you could so something like


Ext.menu.BaseItem.prototype.onRender = function(container){
this.el = Ext.get(this.el);
container.dom.appendChild(this.el.dom);
if (this.tooltip) {
this.el.dom.qtip = this.tooltip;
}
};


Then add tooltip:'my Tip' to a menu item's config

efege
26 Apr 2007, 2:15 PM
Thanks tryanDLS! Now my menus have tooltips :)

And at the same time, I learnt an extra bit about using Ext.

michael.prichard
27 Apr 2007, 10:34 AM
Great! It worked! Thanks.

Question, can I build these menus like Yahoo UI? I.e. <div> tags and then do a .render()?

KRavEN
22 May 2007, 11:00 AM
How would you go about doing the same for form fields?

tryanDLS
22 May 2007, 11:55 AM
The flow for fields is a little different, but you could probably do the same thing by overriding Field.prototype.onRender. Or it might be better to override afterRender - it's less code to add to your override file. Another way to avoid overriding base code would be to add the logic to the focus event handler and make sure you only add the tip the 1st time thru.

J.C. Bize
4 Jun 2007, 3:12 PM
The flow for fields is a little different, but you could probably do the same thing by overriding Field.prototype.onRender. Or it might be better to override afterRender - it's less code to add to your override file. Another way to avoid overriding base code would be to add the logic to the focus event handler and make sure you only add the tip the 1st time thru.

Yeah this works great... just what I was looking for, thanks.


//override onRender function for form fields so that they display QuickTips
Ext.form.Field.prototype.afterRender = function(){
if (this.tooltip) {
this.el.dom.qtip = this.tooltip;
}
Ext.form.Field.superclass.afterRender.call(this);
this.initEvents();
};

...

var combo = new Ext.form.ComboBox({
store: store,
displayField:'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
width:135,
tooltip: '<b>State</b><br/>Name of the state to display'
});

Hopefully, someone else will find this helpful!

Regards,
JC

mscdex
22 Aug 2007, 11:46 AM
Sorry, I found out there was a problem elsewhere in my code and had nothing to do with the snippet, after fixing that that snippet works great! Thanks :)