ExtJS: Field change event fires before ViewController's init

- 1 answer

Ad

I have a field that is stateful, and I also have it hooked up to the change event... when its value changes, I want to perform some operation. However, because it's a stateful field, the change event fires when I go back to this view, and unfortunately, the change event fires before the ViewController's init method, which means I will not be able to access my reference lookup.

In the following example, run it, change the date, and then re-run the application... you'll see a console.log that appears for the change, and then for the init. I realize I could set up the handler in the init method, but that just seems silly. I also realize I could create myField as a private var and access it that way, but that also seems silly. And yes, I could change to the select event, but that's not what I want to do. Anyone have any thoughts? Here's an example:

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        Ext.define('MyViewController', {
            extend: 'Ext.app.ViewController',
            alias: 'controller.myView',

            init: function() {
                console.log('init fired', this.lookupReference('myField'))
            },

            onChange: function(value) {
                console.log('onChange fired', this.lookupReference('myField'));
            }
        });
        Ext.define('MyView', {
            extend: 'Ext.container.Container',
            controller: 'myView',
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'datefield',
                value: new Date(),
                stateful: true,
                stateId: 'blahblah',
                listeners:{
                    change: 'onChange'
                }
            }, {
                xtype: 'datefield',
                value: new Date(),
                reference: 'myField'
            }]
        });
        Ext.create('MyView');
    }
});
Ad

Answer

Ad

This is because the state mixin is initialized before the controller, this is code taken directly from Ext.Component's constructor:

    me.mixins.state.constructor.call(me);
    me.addStateEvents('resize');
    controller = me.getController();
    if (controller) {
        controller.init(me);
    }

There is no config to change this behavior. Honestly, I've never seen someone make a form field's value stateful.

Ad
source: stackoverflow.com
Ad