如何在属性更改后立即触发属性更改事件？

Question

I have this code that you can test here :

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.grid.property.Grid', {
            id: "PROPERTIES",
            renderTo: Ext.getBody(),
            autoHeight: true,
            width: 300,
            viewConfig: {
                forceFit: true,
                scrollOffset: 2 // the grid will never have scrollbars
            },
            listeners: {
                propertychange: function(source, recordId, value, oldValue) {
                    alert("new Value=" + value);
                }
            },
            source: {
                "title": "My Object",
                "color": Ext.Date.parse('10/15/2006', 'm/d/Y'),
                "Available": false,
                "Version": 0.01,
                "Description": "A test object"
            }
        });
    }
});

When I change the false value to true in the example the property change event only fires when I click off the true/false box. I would like the event (or another event) to fire immediately after I change the value. How can I do this?

Answer 1

This is the way it works, your field will only fire the propertychange event once the editor is closed.

If you really want to run a function or do something else for every field change value before the editor is closed you will have to add a controller and listen for the change event for each field inside the property panel. Here is how it would work:

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',


    init: function() {
        this.control({
            'propertygrid field': {
                change: function(field, newValue, oldValue, eOpts){
                    console.log(field, newValue, oldValue);
                }
            }
        });
    }
});

Ext.application({
    name: 'MyApp',

    controllers : ['MyController'],
    launch: function() {
        Ext.create('Ext.grid.property.Grid', {
            id: "PROPERTIES",
            renderTo: Ext.getBody(),

            autoHeight: true,
            width: 300,
            viewConfig: {
                 forceFit: true,
                 scrollOffset: 2 // the grid will never have scrollbars
            },
            listeners: {
                propertychange: function(source, recordId, value, oldValue) {
                    alert("new Value=" + value);
                }
            },
            source: {
                "title": "My Object",
                "color": Ext.Date.parse('10/15/2006', 'm/d/Y'),
                "Available": false,
                "Version": 0.01,
                "Description": "A test object"
            }
        });
    }
});

Here is a fiddle with a demo: https://fiddle.sencha.com/#fiddle/bti