How to place a button inside an input field using Sencha Touch? - sencha-touch

Question

When I try to put a container as a component in the textfield (according to Button inside of an input field Sencha Touch 2.0) my app crashes. The code below is for you to get an idea of the context, im didnt double check the syntax in the post but when I comment out the last item it works fine . I think it is the xtype: 'container' that generates the error (the error is "undefined function"). What am I doing wrong here? Im so bad at this...
Ext.define('myapp.view.AddAdvertView', {
extend: 'Ext.form.Panel',
xtype: 'addadvertview',
requires: [
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.field.Number',
'Ext.Button',
'Ext.field.Toggle',
'Ext.Container'
],
config: {
title: 'AddAdvertView',
items: [
{
name: 'heading',
xtype: 'textfield',
label: 'Heading',
border: 10,
margin:'0 0 1 0',
},
{
xtype: 'textfield',
component: {
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'textfield',
flex: 3,
},
{
xtype: 'button',
flex: 1,
text: 'test'
}
]
},
})

Answer 1

You are right. The problem is the container inside the textfield.
When a textfield is generated and initialized it will set its original value. Since you have changed the component to container and it's not input anymore you get the problem. The initialization process calls the getValue methode of the component. Unfortunately container does not have one and that's rises the exception.
The solution to this problem is quite easy: create your custom textfield and override its getValue method.
Ext.define("MyApp.field.ButtonField", {
extend: "Ext.field.Text",
xtype: "buttonfield",
config: {
label: 'Textfield',
component: {
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'textfield',
flex: 3,
},
{
xtype: 'button',
flex: 1,
text: 'test'
}
]
}
},
getValue: function () {
this.getComponent().down('textfield').getValue();
},
setLabel: function ( label ) {
this.getComponent().down('textfield').setLabel( label );
}
});
Since it has an xtype you can use it as follows:
Ext.define('MyApp.view.AddAdvertView', {
extend: 'Ext.form.Panel',
xtype: 'addadvertview',
requires: [
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.field.Number',
'Ext.Button',
'Ext.field.Toggle',
'Ext.Container',
'MyApp.field.ButtonField'
],
config: {
title: 'AddAdvertView',
items: [
{
name: 'heading',
xtype: 'textfield',
label: 'Heading',
border: 10,
margin:'0 0 1 0',
},
{
xtype: 'buttonfield',
label: 'blub'
}
]
}
});
You have to override some more methods (e.g. setValue) if you want to use the buttonfield like a normal field. So you delegate all textfield method calls to the wrapped textfield. But that should be easy now.