Sometime you might want to provide a helpful explanation on the form field built with Extjs, there’s a quick way to do by utilizing the qtip
Add an interceptor to the Fields initComponent method to add a question mark at the end of the label
<code style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: rgb(238, 238, 238); font-family: Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif;"><span class="typ" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: rgb(43, 145, 175);">Ext</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">.</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">intercept</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">(</span><span class="typ" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: rgb(43, 145, 175);">Ext</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">.</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">form</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">.</span><span class="typ" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: rgb(43, 145, 175);">Field</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">.</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">prototype</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">,</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"> </span><span class="str" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: maroon;">'initComponent'</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">,</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"> </span><span class="kwd" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: rgb(0, 0, 139);">function</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">()</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"> </span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">{</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">
</span><span class="kwd" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: rgb(0, 0, 139);">var</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"> fl </span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">=</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"> </span><span class="kwd" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: rgb(0, 0, 139);">this</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">.</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">fieldLabel</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">,</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"> h </span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">=</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"> </span><span class="kwd" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: rgb(0, 0, 139);">this</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">.</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">helpText</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">;</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">
</span><span class="kwd" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: rgb(0, 0, 139);">if</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"> </span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">(</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">h </span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">&&</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"> h </span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">!==</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"> </span><span class="str" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: maroon;">''</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"> </span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">&&</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"> fl</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">)</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"> </span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">{</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">
</span><span class="kwd" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: rgb(0, 0, 139);">this</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">.</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">fieldLabel </span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">=</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"> fl</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">+</span><span class="str" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: maroon;">' <span style="color:green;" ext:qtip="'</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">+</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">h</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">+</span><span class="str" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: maroon;">'">(?)</span> '</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">;</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">
</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">}</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">
</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">});</span></code>
Then in each field definition you just need to provide a helpText property:
<code style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: rgb(238, 238, 238); font-family: Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,serif;"><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">{</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"><br /> fieldLabel</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">:</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"> </span><span class="str" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: maroon;">'Title'</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">,</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"><br /> helpText</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">:</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"> </span><span class="str" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: maroon;">'The title should be a string without spaces'</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">,</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"><br /> name</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">:</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"> </span><span class="str" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: maroon;">'title'</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">,</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"><br /> allowBlank</span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">:</span><span class="kwd" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: rgb(0, 0, 139);">false</span><span class="pln" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;"><br /></span><span class="pun" style="margin: 0px; padding: 0px; border-width: 0px; font-size: 14px; vertical-align: baseline; background-color: transparent; color: black;">}</span></code>
You will get a nice result
Related posts:
