Databases
StackOverflow2013
Postsdbo
POHow to put text and clickable icons in a Ext.Panel header?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to put text and clickable icons in a Ext.Panel header?
    text
    copied!<p>I would like to put text and clickable icons in the headers in my panels, like this: <img src="https://i.stack.imgur.com/Kk6rv.png" alt="enter image description here"></p> <p>I've found some <a href="http://www.sencha.com/forum/showthread.php?41156-Buttons-on-panel-header&amp;p=194506" rel="nofollow noreferrer">old hacks from 2008 to do this</a>, but can imagine that the newer versions of ExtJS allow you to put text and icons in panel headers in a more straightforward way.</p> <p><strong>What is the most straight-forward way to put text and clickable icons in a Ext.Panel header?</strong></p> <h1>Addendum</h1> <p>thanks @Stefan that worked, here's my solution:</p> <p><img src="https://i.stack.imgur.com/CU5Wt.png" alt="enter image description here"> </p> <p><strong>Javascript:</strong></p> <pre><code>var grid_shopping_cart = new Ext.grid.GridPanel({ headerCfg: { tag: 'div', cls: 'x-panel-header', children: [ { tag: 'div', cls: 'panel_header_main', 'html': 'Shopping Cart' }, { tag: 'div', cls: 'panel_header_icon1', 'html': '&lt;img src="images/icon_plus.png" /&gt;' }, { tag: 'div', cls: 'panel_header_extra', 'html': 'Order Number: 2837428347' } ] }, width: 600, height: 390, ... listeners: { 'afterrender' : function(p) { p.header.on('click', function(e, h) { alert('you clicked the plus'); }, p, { delegate: '.panel_header_icon1', stopEvent: true }); }, ... </code></pre> <p><strong>CSS:</strong></p> <pre><code>div.panel_header_main { text-align: left; float: left; } div.panel_header_extra { text-align: left; float: right; margin-right: 10px; } div.panel_header_icon1 { text-align: right; float: right; margin-left: 3px; cursor: hand; cursor: pointer; } div.panel_header_icon2 { text-align: right; float: right; margin-left: 3px; cursor: hand; cursor: pointer; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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