Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Ok, i just found a solution which should cover all the problems described above:</p> <p>I add both, the <code>pressed</code> and <code>hovered</code> style directly to the header.</p> <p>To make sure that the header won't be polluted i just remove the style-elements dynamically with <code>jQuery</code>'s detach-function from the header before appending new ones.</p> <p><a href="http://jsfiddle.net/suamikim/c3eHh/1/" rel="nofollow">Working example</a></p> <p>And the code for the dynamic changing of the background:</p> <pre><code>function updateBackground() { var theWin = win || this, // neccessary because of the call from the afterrender-event btn = theWin.down('#btnTest'), bckgr = theWin.down('#btnBckgr').getValue(), bckgrHover = theWin.down('#btnBckgrHover').getValue(), bckgrPressed = theWin.down('#btnBckgrPressed').getValue(); // Set normal background as button-style // Should be ok $('#' + btn.id).css('background', bckgr); // Set the background for hovered and pressed button as document style // Remove style-element if it already exists to not pollute the document-head $('head style:contains("' + btn.id + ':hover")').detach(); $('&lt;style type="text/css"&gt; #' + btn.id + ':hover { background: ' + bckgrHover + ' !important } &lt;/style&gt;').appendTo('head'); $('head style:contains("' + btn.id + '.x-btn-pressed")').detach(); $('&lt;style type="text/css"&gt; .x-body #' + btn.id + '.x-btn-pressed { background: ' + bckgrPressed + ' !important } &lt;/style&gt;').appendTo('head'); }; </code></pre> <p>Seems to work for me but I'm still open for any suggestions/improvements to this!</p> <p>Thanks.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload