title: Sencha Ext Js - Add a span/div to form field template then dynamically change contents for a text counter
body: <p>I am new to Ext Js so forgive me if my terminology for certain things is not correct.  What I need is text counter.  Here is what I have so far...</p>
  
  <p><a href="http://jsfiddle.net/gfrobenius/WxNDf/1/" rel="nofollow">http://jsfiddle.net/gfrobenius/WxNDf/1/</a></p>
  
  <p>What I need to do is make this code reusable so that all textareas get this feature but I still have the ability to change the normal settings like label, name, id, maxLength, etc...  Does this mean turning it into a class, plugIn, component (sorry still trying to learn terminology)?  Can my afterLabelTextTpl be done simpler?  I've seen examples like:</p>
  
  <pre><code>var tpl = new Ext.Template('Name: {name}, Age: {age}');
  tpl.apply({name: 'John', age: 25});
  </code></pre>
  
  <p>in the documentation but am not sure how to incorporate it into my code.  Also in my three functions for updating the text count you can see I have the line for getting the component hard-coded to 'gtext' and the line for getting the 'countDownSpan' hard-coded as well.  How do I go about making them just know the parent item?</p>