Creating custom form field

[kiploona]

Hello!

I'm trying to create custom form field which is consists from 2 standart form fields.
And I want it to act like a usual form field.

Maybe someone could help me by giving several tips or even write a simple tutorial about custom form fields, which I believe will be helpful for a lot of beginners?

In my situation, i need to create textfield + combobox, which should act together, and work correct with getValue() and setValue() functions.

I'm trying to make it this way:



Ext.define('tapp.view.component.gmTypeList', {
extend: 'Ext.container.Container',
alias : 'widget.gmTypeList',

initComponent: function() {
var me = this;


this.layout = 'hbox';

this.text = Ext.create('Ext.form.field.Text', {
fieldLabel: 'GM types',
});

this.checkbox = Ext.create('Ext.form.field.Checkbox', {
margin: '0 0 0 5',
width: 100,
xtype: 'checkbox',
boxLabel: 'All GM types',
listeners: {
'change': function(checkbox, val) {
switch (val) {
case true:
me.text.disable();
me.text.clearValue();
break;

default:
me.text.enable();
}
}
}
});

this.items = [ this.text, this.checkbox ];

this.callParent(arguments);
},

getValue: function() {
if (this.checkbox.getValue()) {
return 'ALL';
};

return this.text.getValue();
},

setValue: function(val) {
this.value = val;

if (val == 'ALL') {
this.checkbox.setValue(true);
this.text.clearValue();

return;
};

this.checkbox.setValue(false);
this.text.setValue(val);
}
});



Is it a correct way to create custom form fields or not?
For this moment component acts not like native form item, because
Ext.form.Panel function loadRecord(data) is not loading value (gmTypeList.setValue() is not called by this function)



var form = Ext.create('Ext.form.Panel', {
items: [{
xtype: 'datefield',
fieldLabel: '???? ????? ???????',
name: 'input_date',
}{
xtype: 'gmTypeList',
name: 'gm_list'
}]
});

var data = Ext.create('tapp.model.input', {
input_date: new Date(),
gm_list: '4000'
});

form.loadRecord(data);


this code sets 'input_date' field correctly, but 'gm_field' stays empty

[mitchellsimoens]

Doesn't look like there would be any problems with doing it like that.

[Jangla]

Why not add a third field - a hidden field - to the component which would have the name attribute set to the field name you want to load from your store? Then you could update setValue and getValue to update the hidden field too.