title: How can I bring a 'sencha' selectfield into view when I am using an overlay?
body: <p>I currently have a setup where you press a button and an overlay is displayed. 
  The overlay looks like follows:</p>
  
  <pre><code>this.popup = new Ext.Panel({
      floating: true, modal: true, centered: true, width: 600, height: 400,
      items: [
          {
              xtype: 'toolbar',
              title: 'Custom Search',
              docked: 'top'
          },
          new Ext.field.Select({
              label: 'abc', name: 'asz', options: [...]
          })
      ]
  });
  </code></pre>
  
  <p>Now as you can see there is a single selectfield on my overlay, the problem is, when you click to bring up the selection menu, the selection menu appears behind the overlay. I have tried all kinds of hacky tricks to no avail. I have tried adjusting the zIndex values, however they just seem to either not change, or change back to sencha's defaults, because it doesnt seem to make a difference.</p>
  
  <p>I would never have thought that in sencha i could spend so many hours trying to put a selectfield onto an overlay. This problem seems to occur in both chrome &amp; safari (ipad)</p>
  
  <p>Both overlay &amp; selectfield code was basically taken from here <a href="http://dev.sencha.com/deploy/touch/examples/kitchensink/" rel="nofollow">http://dev.sencha.com/deploy/touch/examples/kitchensink/</a></p>