Ext.Toolbar.Button.setIcon or .update or .refresh?

[jay@moduscreate.com]

OK, so i am working on toolbar + layout. Created buttons to expand/contract regions.

I'd like to update the icon but when i set item.icon it obviously doesn't update.


Is this a feasible request?

[jack.slocum]

You can add and remove class from the inner button element:

btn.el.child("button:first").replaceClass('old-icon', 'new-icon');

[jay@moduscreate.com]

Going to try this. Thanks dude. =D>

[jay@moduscreate.com]

No workie. I can set classes all day long, but the fact is that the style overrides the class, no?



<table id="tb_westRegion" class="x-btn-wrap x-btn-icon x-btn x-btn-pressed" cellspacing="0" cellpadding="0" border="0" style="width: auto; visibility: visible;">
<tbody>
<tr>
<td class="x-btn-left">
</td>
<td class="x-btn-center">
<em>
<button id="ext-gen131" class="x-btn-text" style="background-image: url(img/toolbar/silk_icons/icons/application_side_expand.png);"/>
</em>
</td>
<td class="x-btn-right">
</td>
</tr>
</tbody>
</table>

[rtannert2]

Yes. I think what you want to do is specify the background images in classes in your stylesheet, e.g.,


.appl-side-expand {
background-image: url(img/toolbar/silk_icons/icons/application_side_expand.png);
}
.appl-side-contract {
background-image: url(img/toolbar/silk_icons/icons/application_side_contract.png);
}
and then switch the class when you need to, as Jack suggested.

[jay@moduscreate.com]

Yes. I think what you want to do is specify the background images in classes in your stylesheet, e.g.,


.appl-side-expand {
background-image: url(img/toolbar/silk_icons/icons/application_side_expand.png);
}
.appl-side-contract {
background-image: url(img/toolbar/silk_icons/icons/application_side_contract.png);
}
and then switch the class when you need to, as Jack suggested.


Is my understanding incorrect about precedence?

case: style > css class for an element.

[rtannert2]

Your understanding is correct, inline styles take precedence over stylesheet rules. Google "CSS inline style precedence" and you'll see lots of information on this. My advice was simply to avoid the inline style instruction in your example and stick to applying CSS classes to the button instead.

[jay@moduscreate.com]

Understood. That didn't resolve it though. ;)