ExtJS how to create a custom field from a custom component

Question

I have my application (ExtJS 4.2.1) and I have a form:

xtype: 'form',
    bodyPadding: 10,
    autoScroll: false,
    itemId: 'editForm',
    defaults: { 
        msgTarget: 'side',
        xtype: 'textfield'
    },
    //layout:'anchor',
    items: [{
            xtype: 'combobox',
            itemId: 'cboEmployer',
            store: Ext.create('App.store.catalog.Employer', {
                autoLoad: true
            }),
            displayField: 'Description',
            valueField: 'EmployerId',
            fieldLabel: 'Company',
            name: 'EmployerId',
            queryMode: 'local',
            allowBlank: false,
        },{
            xtype: 'radiogroup',
            fieldLabel: 'Type',
            name: 'RequestInAdvance',
            columns: 2,
            items: [{
                    boxLabel: 'Normal',
                    name: 'RequestInAdvance',
                    inputValue: 0,
                    checked: true
                }, {
                    boxLabel: 'Advanced',
                    name: 'RequestInAdvance',
                    inputValue: 1
                }

            ]
        }, {

            xtype: 'fieldset',
            title: 'Date selection',
            defaults: {
                labelWidth: 89,
                anchor: '100%',
                layout: {
                    type: 'hbox',
                    defaultMargins: {
                        top: 0,
                        right: 5,
                        bottom: 0,
                        left: 0
                    }
                }
            },
            items: [{
                xtype: 'highlightdate', // <- This is a custom datepicker but I need it to be a field type
                name: 'SelectedDates',
                itemId: 'datePicker'
            }],

        },

    ],
    buttons: [{
        text: 'Save',
        action: 'commit',
        glyph: Glyphs.SAVE,
        disabled: true
    }],

xtype: 'highlightdate' is a custom datepicker and I need to do custom form Validation so I can mark the element as error:

In my validation method I have:

    var fieldMatch = Ext.ComponentQuery.query('field[name=' + error.field + ']');
 if (fieldMatch.length) {
                // add extra validaiton message to the offending field
                fieldMatch[0].markInvalid(error.message);
            }

So when I try to set an error to my highlightdate xtype It can be found becuase is not a field.

Is there a way to workaround this?

There's already been an extensive [discussion on that topic](http://stackoverflow.com/q/6153362/1387519) here, hope it can help with your case. — rixo, Jul 29 '14 at 18:08

score 0 · Answer 1 · answered Jul 29 '14 at 18:26

0

xtype is just a shortname for your custom 'highlightdate' class and can be replaced by the new Namespace.CustomClass({cfg}) notation. What you need to figure out is: what base class does this custom class extend? If it extends Ext.form.field.Base or Ext.form.field.Text for ex. than it's also a field and inherits all the properties from it.

answered Jul 29 '14 at 18:26

Gad

41,526
13
54
78

This base class extend: 'Ext.picker.Date' – VAAA Jul 29 '14 at 18:28
So I dont know if I can add something to the class so It can also extends from Ext.form.field.Base. Or maybe I can't have this component both as component and as field. So that way I would have to create the same component but that extends from field. – VAAA Jul 29 '14 at 18:29
`Ext.picker.Date` extends `Ext.Component` so you cannot treat it as a field. However it contains a bunch of methods that allow you to alter the CSS (`addCls`, `removeCls`, ...) so you will have to play with those and its events. – Gad Jul 29 '14 at 18:34
Ohhh interesting, very interesting. So something that inherits from Ext.component cannot be treated as a field. – VAAA Jul 29 '14 at 18:40
Maybe you should try using `Ext.form.field.Date` as a base class and work your way from there? – Gad Jul 29 '14 at 18:48
I will try to... hope it can work the same as the one I have :) – VAAA Jul 29 '14 at 18:49
Otherwise, you can put your code with that custom component in a https://fiddle.sencha.com and we can try to see what's possible. – Gad Jul 29 '14 at 18:54
Appreciate it :) I will give me a time to post that in fiddle.sencha.com Appreciate it. – VAAA Jul 29 '14 at 18:58

ExtJS how to create a custom field from a custom component

1 Answers1