title: Sencha Touch 2 Component in list emptyText
body: <p>I have a list component that I want to display a button to send a suggestion for the data to be included if it turns up no results.</p>
  
  <p>List component itself is implemented like this:</p>
  
  <pre><code>        {
              xtype: 'list',
              itemTpl: '{name}',
  
              // This is not ideal!
              emptyText: [
                  '&lt;div class="x-button-normal x-button"&gt;',
                      '&lt;span class="x-button-label"&gt;',
                          'Suggest &lt;i&gt;&lt;span id="suggest-name"&gt;&lt;/i&gt;',
                      '&lt;/span&gt;',
                  '&lt;/div&gt;'
              ].join(''),
  
              store: 'TheStore'
          }
  </code></pre>
  
  <p>And this is the handler for the search field that simply sets a substring filter on the store:</p>
  
  <pre><code>        'keyup': function(self, e, eOpts) {
              queryString = self.getValue();
           
              var store = Ext.getStore('TheStore');
              store.clearFilter();
           
              if(queryString){
                  var thisRegEx = new RegExp(queryString, "i");
                  store.filterBy(function(record) {
                      if (thisRegEx.test(record.get('name'))) {
                          return true;
                      };
                      return false;
                  });
                  // Changes the button so it shows name
                  document.getElementById('suggest-name').innerText = queryString;
              }
          },
  </code></pre>
  
  <p>Right now, I have the emptyText set to some simple HTML that emulates the look of a Sencha Touch button, but this means I have none of the button behaviour since it's not tied into the component system (such as being depressed when tapped). How can I set the emptyText attribute (or emulate it) since a proper button is displayed instead?</p>