title: How to get a Custom ExtJS Component to render some html based on a bound value
body: <p>I'm trying to get a custom extjs component to render either a green-check or red-x image, based on a true/false value being bound to it.</p>
  
  <p>There's a couple of other controls that previous developers have written for rendering custom labels/custom buttons that I'm trying to base my control off but I'm not having much luck.</p>
  
  <p>I'd like to be able to use it in a view as follows where "recordIsValid" is the name of the property in my model. (If I remove the xtype: it just renders as true/false)</p>
  
  <pre><code>{
      "xtype": "booldisplayfield",
      "name": "recordIsValid"
  }
  </code></pre>
  
  <p>Here's what I have so far, but ExtJS is pretty foreign to me.</p>
  
  <pre><code>Ext.define('MyApp.view.ux.form.BoolDisplayField', {
      extend: 'Ext.Component',
      alias : 'widget.booldisplayfield',
      renderTpl : '&lt;img src="{value}" /&gt;',
      autoEl: 'img',
      config: {
          value: ''
      },
      initComponent: function () {
          var me = this;
          me.callParent(arguments);
  
          this.renderData = {
              value: this.getValue()
          };
      },
      getValue: function () {
          return this.value;
      },
      setValue: function (v) {
  
          if(v){
              this.value = "/Images/booltrue.png";
          }else{
              this.value = "/Images/boolfalse.png";
          }
          return this;
      }
  });
  </code></pre>
  
  <p>I'd taken most of the above from a previous custom linkbutton implementation. I was assuming that <code>setValue</code> would be called when the model-value for <code>recordIsValid</code> is bound to the control. Then based on whether that was true or false, it would override setting the value property of the control with the correct image. </p>
  
  <p>And then in the initComponent, it would set the <code>renderData value</code> by calling <code>getValue</code> and that this would be injected into the <code>renderTpl</code> string.</p>
  
  <p>Any help would be greatly appreciated.</p>