title: Why is the button in my ExtJS grid appearing as "[object Object]"?
body: <p>In an <strong>ExtJS grid</strong> I have a column in which when the content of a cell is a certain value, a <strong>button</strong> should be displayed.</p>
  
  <p>I define the column which will contain the button like this, which calls a <strong>rendering function</strong>:</p>
  
  <pre><code>{
      header: 'Payment Type',
      width: 120,
      sortable: true,
      renderer: renderPaymentType,
      dataIndex: 'paymentType'
  }]
  </code></pre>
  
  <p>in the rendering function, I return either text or the <strong>button</strong> itself:</p>
  
  <pre><code>function renderPaymentType(val) {
      if(val!='creditInform') {
          return val;
      } else {
          return new Ext.Button({
              text: val,
              width: 50,
              handler: function() {
                  alert('pressed');
              }
          });
      }
  }
  </code></pre>
  
  <p>This basically works, except that the button is displayed as the text <strong>[object Object]</strong>:</p>
  
  <p><img src="https://i.stack.imgur.com/euMoX.png" alt="enter image description here"></p>
  
  <p><strong>What do I have to do so that the button is displayed as a button instead of as text?</strong></p>
  
  <h1>Addendum</h1>
  
  <p>adding <code>.getEl()</code>:</p>
  
  <pre><code>function renderPaymentType(val) {
      if(val!='creditInform') {
          return val;
      } else {
          return new Ext.Button({
              text: val,
              width: 50,
              handler: function() {
                  alert('pressed');
              }
          }).getEl();
      }
  }
  </code></pre>
  
  <p>produces a <strong>blank</strong>:</p>
  
  <p><img src="https://i.stack.imgur.com/hb5gH.png" alt="enter image description here"></p>
  
  <p>adding <code>.getEl().parentNode.innerHTML</code>:</p>
  
  <pre><code>function renderPaymentType(val) {
      if(val!='creditInform') {
          return val;
      } else {
          return new Ext.Button({
              text: val,
              width: 50,
              handler: function() {
                  alert('pressed');
              }
          }).getEl().parentNode.innerHTML;
      }
  }
  </code></pre>
  
  <p>causes some kind of rendering problem with the rest of the code altough in Firebug I strangely don't get any errors:</p>
  
  <p><img src="https://i.stack.imgur.com/idclf.png" alt="enter image description here"></p>