Databases
StackOverflow2013
Postsdbo
POHow to change background of hovered and pressed extjs-button dynamically
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to change background of hovered and pressed extjs-button dynamically
    primarykey
    data
    text
    <p>Hy there,</p> <p>i need the ability to change the background-color for the different states (normal, hover, pressed) of a button dynamically.</p> <p>What i've came up with so far is the following: <a href="http://jsfiddle.net/suamikim/c3eHh/" rel="nofollow">http://jsfiddle.net/suamikim/c3eHh/</a> </p> <pre><code>Ext.onReady(function() { 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); // Toggle background when hover-state changes // Are there any downsides if this function gets called everytime the updateBackground-method is called? Do i have to dispose anything before binding the functions again? $('#' + btn.id).hover(function() { $('#' + btn.id).css('background', bckgrHover); }, function() { $('#' + btn.id).css('background', bckgr); } ); // Set the background for pressed button as document style // Problems: // - Pollutes the document-header if called multiple times... // - Background does not change anymore on hover for pressed button because of the !important, but without important it wouldn't show the pressed background at all... $('&lt;style type="text/css"&gt; #' + btn.id + '.x-btn-pressed { background: ' + bckgrPressed + ' !important } &lt;/style&gt;').appendTo('head'); }; // Create a window with the propertygrid var win = Ext.create('Ext.window.Window', { width: 800, height: 200, layout: 'fit', tbar: { defaultType: 'textfield', defaults: { listeners: { blur: updateBackground } }, items: [ 'Background (CSS):', { itemId: 'btnBckgr', value: '#77ABD8' }, 'Background hover (CSS):', { itemId: 'btnBckgrHover', value: '#CC1C1C' }, 'Background pressed (CSS):', { itemId: 'btnBckgrPressed', value: '#7D4FC6' } ] }, items: [{ xtype: 'button', itemId: 'btnTest', text: 'test button', enableToggle: true }], listeners: { 'afterrender': updateBackground } }).show(); }); </code></pre> <p>This works basically but there are some questions left to me:</p> <h3>1)</h3> <p>Is it ok to call the hover-function of jquery everytime the updateBackground-method is called?<br><br> According to the jquery-doc (<a href="http://api.jquery.com/hover/" rel="nofollow">http://api.jquery.com/hover/</a>) this functions binds the 2 given functions to the mouse-enter- &amp; mouse-leave-events of the given element.<br><br> Does this mean that it binds new functions everytime i call it or does it update the already bound ones or does it dispose the already bound ones automatically before binding the new ones...<br><br> In short: do i have to dispose anything before binding the new functions with $.hover?</p> <h3>2)</h3> <p>I set the style for the pressed state as document-style which means that the document-header gets polluted if the updateBackground-function is called often (everytime one of the text-fields fires the blur-event in my test-case).<br><br></p> <p>Is there any better way to achieve the same goal or can i remove the already set styles before adding new ones?</p> <h3>3)</h3> <p>The background for hover-state doesn't appear if the button is pressed because of the !important-flag in the pressed-style. I can't just remove this flag because the background of the pressed-state wouldn't show correctely without it... Any solutions?<br><br></p> <p>In general i'd be open for every suggestion on how to solve this problem in a completely different way.</p> <p>Thanks,</p> <p>mik</p> <p><hr></p> <h3>Edit:</h3> <p>The code above is just an example. Actually i need to be able to change the background-attribute for other ext-controls than buttons too (panels, checkboxes, ...) but i think that i can adopt a working solution for buttons to those other controls myself.<br><br></p> <p>Please keep this in mind and don't specify the answer too much on buttons. It should be as generic as possible...</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USsuamikim
    1. USsuamikim
    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. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to change background of hovered and pressed extjs-button dynamically
      1. USREAL
      1. VTFavorite
    2. VO
      singulars
      1. POHow to change background of hovered and pressed extjs-button dynamically
      1. USMr_Green
      1. VTFavorite
    3. VO
      singulars
      1. POHow to change background of hovered and pressed extjs-button dynamically
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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