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

Question

我有这段代码您可以测试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"
            }
        });
    }
});

当我在示例中将 false 值更改为 true 时，仅当我单击 true/false 框时才会触发属性更改事件。我希望在更改值后立即触发该事件(或另一个事件)。我怎样才能做到这一点？

Answer 1

这就是它的工作方式，您的字段只会在编辑器关闭后触发 propertychange 事件。

如果您确实想在编辑器关闭之前运行函数或对每个字段更改值执行其他操作，则必须添加一个 Controller 并监听属性面板内每个字段的更改事件。其工作原理如下:

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"
            }
        });
    }
});

这是一个演示的 fiddle :https://fiddle.sencha.com/#fiddle/bti