PDA

View Full Version : Changing button icon when toggle clicked is not working in IE


Rewand
13 Jul 2007, 10:12 AM
I have a simple self-contained test page that just puts up a toggle button. In FireFox, clicking the button toggles the tooltip AND the icon. I IE, clicking the button toggles the tooltip BUT doesn't change the icon.

Anyone know how to get a button to change its icon when it's toggled?



<html>
<head>
<title>ToggleTest</title>
<link href="css/explorerMain.css" rel="stylesheet" type="text/css"></link>
<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css"></link>

<script type='text/javascript' src='js/ext/adapter/yui/yui-utilities.js'></script>
<script type='text/javascript' src='js/ext/adapter/yui/ext-yui-adapter.js'></script>
<script type='text/javascript' src='js/ext/ext-all-debug.js'></script>

</head>
<style type='text/css'>
.filter-btn .x-btn-text {
background-image: url('js/ext/resources/images/default/menu/checked.gif');
}

.x-btn-pressed.filter-btn .x-btn-text {
background-image: url('js/ext/resources/images/default/menu/unchecked.gif');
}
</style>
<body onload="init()">

<div id="toolBar">
</div>
</body>
</html>
<script>
function init(){
Ext.QuickTips.init();

//make toolbar, add button
tbar = new Ext.Toolbar('toolBar');
var mybutton = new Ext.Toolbar.Button({
text: '',
tooltip: 'ON',
cls: 'x-btn-icon filter-btn',
enableToggle: true,
toggleHandler: function(){
if(this.pressed){
try{
//until the Button class exposes a setTooltip() change by brute force
this.el.child('button:first').dom.qtip = '<b>OFF</b>';
}
catch(e){
//do nothing
}
}
else{

try{
this.el.child('button:first').dom.qtip = '<b>ON</b>';
}
catch(e){
//do nothing
}
}
}
});
tbar.addButton(mybutton);
}
</script>
jay@moduscreate.com
13 Jul 2007, 10:46 AM
I've tried to toggle an icon for a button and got no results. once you render the object you can't change the icon.

The best way to do it is traverse the DOM and set the image manually.
Rewand
25 Jul 2007, 9:13 AM
Brute force method to get this working in IE. My handler function sets this back and forth


if(this.pressed){
//check and see if we have anything to filter on
try{
//until the Button class exposes a setTooltip() change by brute force
var but = this.el.child('button:first').dom.qtip = 'Tree filtering is currently ON<br>Click to turn Tree filtering <b>OFF</b>';
treeManager.funnelBut.setText("<img src='icons/funnel_X.gif'>");
}
catch(e){
utils.alertObj("exception while changing qtip\n",e);
//do nothing
}
...
Rowan
27 Jul 2007, 8:06 AM
handler : function(){
this.el.child('button:first').dom.style.backgroundImage = 'url(/images/icon.gif)';
},
si-rus
3 Aug 2007, 6:39 AM
Super! Thanks.