View Full Version : Different form fields are appearing as just text fields.

7 Oct 2013, 4:05 AM
Hello All,

I am constructing dynamic fields on the page. These fields may be Text fields, number, flag or date.
I am setting their xtypes accordingly but still only normal text fields appear on the form and not xtype specific.

Please find my code mentioned below.

Ext.Object.each(fieldList, function(field, config, allFields) {
config.name = field;
config.formPanel = this;
config.fieldLabel= config.label;

if (config.Type === 'DATE') {
config.xtype= 'sfdate';
} else if (config.Type === 'FLAG') {
config.xtype= 'checkbox';
} else if (config.Type === 'TEXT') {
config.xtype= 'textfield';
} else if (config.Type === 'NUMBER') {
config.xtype = 'numberfield';
config.anchor = '100%';
config.hideTrigger = true;
config.keyNavEnabled = false;
config.mouseWheelEnabled = false;

vCFContainer.add(new Ext.form.Field(config));

Depending on the config type , I am setting the xtype of the config but still fields with different xtypes appear as just textfields.

What could be the cause? Please let me know what I else I need to do?

7 Oct 2013, 8:53 PM
That actually not even a textfield but rather just a field, because you create instance yourself. In this case xtype is ignored.

7 Oct 2013, 10:01 PM
That is very true. If I try the below, by using the specific constructors of specific type to create various type of fields than I am able to do so.

vXrefField = vXreflayout[Object.keys(vXreflayout)[i]];
vFieldId = Object.keys(vXreflayout)[i];

if (vXrefField.Type === 'DATE') {
field = new Ext.form.DateField({fieldLabel: vXrefField.label, name: vFieldId});
} else if (vXrefField.Type === 'FLAG') {
field = new Ext.form.Checkbox({fieldLabel: vXrefField.label, name: vFieldId});
} else if (vXrefField.Type === 'TEXT') {
field = new Ext.form.TextField({fieldLabel: vXrefField.label, name: vFieldId});
} else if (vXrefField.Type === 'NUMBER') {
field = new Ext.form.NumberField({fieldLabel: vXrefField.label, name: vFieldId, xtype: 'uxnumber',vtype: 'integer',
numberFormat: '5,0',hideTrigger:true,mouseWheelEnabled: false});


But these fields are ExtJs specific and have extra attributes and functionalities.

8 Oct 2013, 1:36 AM
Unfortunately, doc doesn't say that container.add accepts not only instances but config objects (with xtype) too. So you don't need to call any constructor.

8 Oct 2013, 6:19 AM
Thanks All,

I have resolved the issue by overriding the ExtJs fields in the view and then the css and other attributes were changed. These updated fields were then used to generate fields. As mentioned below.

else if (config.Type === 'NUMBER') {
field = new ABC.ux.form.Number({fieldLabel: config.label, name: config.name, vtype: 'integer'});