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事件。

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

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

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

1 个答案: