Form fields in docked items don't fire form's dirty event

[gbjk]

ExtJS 4.1.3

We've got a form Panel onDirtyChange, which fires an event that allows buttons to be changed as relevant.
We noticed that it wasn't firing when you change a field in a toolbar docked in the form (example below).

This is because the Ext.form.Basic relies upon the add event being fired, which isn't fired for docked items. I hunted back to where initDockingItems is called, and as a quick and dirty solution, just jammed in the onDockedAdd function I saw it would call.

This fixed my problem, but nearly definitely isn't the right solution:

Ext.define('carsplus.override.form.Panel', {
    override:   'Ext.form.Panel',
    constructor: function(){
        var me = this;
        this.onDockedAdd = function(item){
            this.form.onItemAddOrRemove(this, item);
        }
        me.callParent(arguments);
    }
});

Example form:

Ext.define('carsplus.view.user', {
    extend : 'Ext.panel.Panel',
    alias  : 'widget.user',

    frame         : false,
    autoScroll    : true,
    layout        : {
        type : 'fit'
    },
    closable      : true,
    collapseFirst : false,
    header        : false,
    iconCls       : 'people',
    title         : '!Staff',

    initComponent : function () {
        var me = this;

        Ext.applyIf(me, {
            items : [
                {
                    xtype            : 'form',
                    itemId           : 'user',
                    autoScroll       : true,
                    layout           : {
                        type : 'column'
                    },
                    bodyPadding      : 10,
                    header           : false,
                    title            : 'My Form',
                    trackResetOnLoad : true,
                    listeners        : {
                        dirtychange : function() {
                            console.log('dirtychange');
                        }
                    },
                    dockedItems      : [
                        {
                            xtype : 'toolbar',
                            dock  : 'top',
                            items : [
                                {
                                    xtype        : 'combobox',
                                    itemId       : 'username',
                                    name         : 'username',
                                    fieldLabel   : '!Username',
                                    labelWidth   : 60,
                                    displayField : 'username',
                                    queryMode    : 'local',
                                    store        : {
                                        fields : ['username'],
                                        data   : [
                                            { username : 'foo' },
                                            { username : 'bar' }
                                        ]
                                    }
                                },
                                {
                                    xtype      : 'textfield',
                                    fieldLabel : 'Foo'
                                }
                            ]
                        }
                    ],
                    items            : [
                        {
                            xtype       : 'fieldcontainer',
                            columnWidth : 0.5,
                            margin      : '0 20 0 0',
                            maxWidth    : 350,
                            autoScroll  : true,
                            layout      : {
                                align   : 'stretch',
                                padding : '0 40 0 0',
                                type    : 'vbox'
                            },
                            fieldLabel  : '',
                            items       : [
                                {
                                    xtype      : 'textfield',
                                    name       : 'empl_first_name',
                                    fieldLabel : '!First Name'
                                },
                                {
                                    xtype      : 'textfield',
                                    name       : 'empl_last_name',
                                    fieldLabel : '!Last Name'
                                }
                            ]
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }
});

Thanks

Gareth

[mitchellsimoens]

Thanks for the report! I have opened a bug in our bug tracker.