Button inside of an input field Sencha Touch 2.0

Question

What I try to achieve is something alike this:
Only then in a Sencha Touch application. I have achieved an input field with a button next to it but not a button inside of a input field.
Is there a way to get this functionality in Sencha Touch 2? (without using css to float the button above the input.

Answer 1

you can achieve this, let's try:

{
    xtype: 'textfield',
    component: {
      xtype: 'container', 
      layout: 'hbox', 
      items: [
      {
        xtype: 'textfield', 
        flex: 3,
      }, 
      {
        xtype: 'button', 
        flex: 1, 
        text: 'test'
      }
      ]},
},

Explanation: component is a special config for input fields and by default, it's set to {xtype: "input", type: "text"}, that's the key of this work-around. Scale your textfield vs button widths with flex config

Hope it helps. :)