title: Rendering extjs component to html tpl
body: <p>i have a simple template: </p>
  
  <pre><code>tpl: '&lt;table&gt;&lt;tr&gt;&lt;td&gt;{LogicalCondition}&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;',
  </code></pre>
  
  <p>Instead of <code>{LogicalCondition}</code> I want to place extjs component (dynamically).</p>
  
  <p>(<a href="http://jsfiddle.net/4t458yxo/2/" rel="nofollow">http://jsfiddle.net/4t458yxo/2/</a>)</p>
  
  <pre><code>    Ext.define('MyApp.view.ux.form.BoolDisplayField', {
          extend: 'Ext.Component',
          alias: 'widget.booldisplayfield',
          tpl: '&lt;table&gt;&lt;tr&gt;&lt;td&gt;{LogicalCondition}&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;',       
          constructor: function (config) {
              this.initConfig(config);
              this.callParent(arguments);
          },
          applyValue: function (v) {
              if (v) {
                  this.update({
                      //instead of combo i am getting [object object]
                      LogicalCondition: Ext.create('Ext.form.ComboBox', {
                          fieldLabel: 'Choose State',
                          store: ["a"],
                          queryMode: 'local',
                          displayField: 'name'
  
                      })
                  });
              }
              return v;
          }
      });
      var c = Ext.create('MyApp.view.ux.form.BoolDisplayField', {
          renderTo: Ext.getBody(),
          value: false
      });
  
  c.setValue(true);
  </code></pre>