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

【问题标题】：How can I fire the property change event immediately after the property is changed?如何在属性更改后立即触发属性更改事件？
【发布时间】：2014-10-16 15:38:33
【问题描述】：

我有这段代码可以测试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 框时触发。我希望在更改值后立即触发事件（或另一个事件）。我该怎么做？

【问题讨论】：

标签： javascript extjs dom-events propertychangelistener

【解决方案1】：

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

如果您真的想在编辑器关闭之前为每个字段更改值运行一个函数或执行其他操作，您将必须添加一个控制器并监听属性面板中每个字段的更改事件。以下是它的工作原理：

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

这里有一个演示：https://fiddle.sencha.com/#fiddle/bti

【讨论】：