Sencha Touch Custom field - sencha-touch-2.2

Question

I have this custom field in my form. But when i do the form.getValues() the values for this field is empty. Is this the right way to create custom form fields.
Ext.define("Tasks.view.BarcodeField", {
extend: 'Ext.Container',
alias:'widget.barcodeField',
xtype: 'barcodefield',
config: {
layout: 'hbox',
id: 'barcodeField',
itemId: 'barcodeField',
items: [
{
xtype: 'textfield',
label: 'Barcode',
labelWidth: '37.4%',
flex: 4
},
{
xtype: 'image',
id : 'barcodeScanner',
itemId : 'barcodeScanner',
src: 'resources/images/barcodes.png',
padding: '6 0 0 0',
flex: 1,
listeners: {
tap: function() {
console.log("Starting the barcode Scanner");
function success(result) {
alert("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
}
function fail(error) {
alert("Scanning failed: " + error);
}
cordova.plugins.barcodeScanner.scan(success, fail);
}
}
}
]
},
getValue : function()
{
console.log(this.getItems().getAt(0).getValue());
return this.getItems().getAt(0).getValue();
},
setValue : function(newvalue) {
this.getItems().getAt(0).setValue(newvalue);
}
});

Answer 1

Instead of extending from the Container i extended the Ext.field.Field and added the items as children to that component.
Ext.define("Tasks.view.BarcodeField", {
extend: 'Ext.field.Field',
alias:'widget.barcodeField',
xtype: 'barcodefield',
config: {
layout: 'hbox',
id: 'barcodeField',
itemId: 'barcodeField',
isField:false,
component : {
xtype:'panel',
layout:'hbox',
items: [
{
xtype: 'input',
label: 'Barcode',
labelWidth: '37.4%',
flex: 4,
id:'barcodeTextField',
itemId:'barcodeTextField'
},
{
xtype: 'image',
id : 'barcodeScanner',
itemId : 'barcodeScanner',
src: 'resources/images/barcodes.png',
padding: '6 0 0 0',
flex: 1,
listeners: {
tap: function() {
console.log("Starting the barcode Scanner");
var text = Ext.ComponentQuery.query("#barcodeTextField")[0];
text.setValue("123456");
}
}
}
]
}
},
getValue : function()
{
console.log(this.getComponent().getItems().getAt(0).getValue());
return this.getComponent().getItems().getAt(0).getValue();
},
setValue : function(newvalue) {
this.getComponent().getItems().getAt(0).setValue(newvalue);
}
});

Answer 2

You can easily add a formpanel as the first child wich will contain a textfield inside in.
And afterward do the formpanel.getValues() to get the values from every field inside that formpanel.
and the other thing is you can do
this.getItems()[0].getValue();
this.getItems()[0].setValue('someDesiredValue');
but that being said I will really prefer doing that on the controller class.