Question

我正在尝试创建一个显示对话框的属性网格自定义编辑器，并允许用户为该字段选择一个新值。

我无法从对话框窗口中的组合框中选择要在属性网格中的自定义编辑器中更新的值，并且无法理解原因。有人可以帮忙吗？

代码：

Ext.onReady(function() {
    var myObject = { 
        number: 'One'
    };

    // custom editor
    Ext.define('Ext.form.DialogEditorField', {
        extend: 'Ext.form.field.Trigger',
        alias: 'widget.dialogEditorField',
        editable: true,
        onTriggerClick: function() {
            var me = this;
            if(!me.dialog) {
                alert('Dialog property not set');
                return;
            }
            if(me.disabled) return;
            if(me.dialog.loadValue) me.dialog.loadValue(this);
            me.dialog.on('hide', function() {
                me.setValue('Five');
            });
            me.dialog.show();
        }
    });

    // dialog to show
    var myDialog = Ext.create('Ext.window.Window', {
        title: 'Example Dialog',
        height: 200,
        width: 300,
        modal: true,
        resizable: false,
        closable: true,
        closeAction: 'hide',
        bbar: [
            '->',
            {
                xtype: 'button',
                text: 'Save',
                listeners: {
                    click: {
                        element: 'el', //bind to the underlying el property on the panel
                        scope: this,
                        fn: function() {
                            var combo = Ext.getCmp('numberCombo');
                            myDialog.saveValue(combo.getValue());
                            myDialog.hide();
                        }
                    }
                }
            },
            {
                xtype: 'button',
                text: 'Cancel',
                listeners: {
                    click: {
                        element: 'el', //bind to the underlying el property on the panel
                        fn: function() {
                        myDialog.hide();
                    }
                }
            }
        }],
        items: [
            Ext.create('Ext.form.ComboBox', {
                id: 'numberCombo',
                editable: false,
                fieldLabel: 'Number',
                store: [ 'One', 'Two', 'Three', 'Four', 'Five'],
                queryMode: 'local'
            })
        ],
        loadValue: function(field) {
            this.fieldId = field.id;
            var combo = Ext.getCmp('numberCombo');
            combo.setValue(field.getValue());
        },
        saveValue: function(value) {
            var field = Ext.getCmp(this.fieldId);
            field.setValue(value);
        }
    });

    // propert grid
    var grid = Ext.create('Ext.grid.property.Grid', {
        title: 'Properties Grid',
        width: 300,
        renderTo: Ext.getBody(),
        source: myObject,
        sourceConfig: {
            number: {
                displayName: 'Number',
                editor: Ext.create('widget.dialogEditorField', {
                    dialog: myDialog
                })
            }
        }
    });
});

Answer 1

请检查以下示例。我尝试了另一种方式。原因是你的代码如此复杂。例如，您是否需要一个对话窗口来更改特定记录？

Grid Panel - Cell Edit

Answer 2

原来这是一个DOM导航问题，这意味着我应该在设置自定义编辑器的值时指向该字段。

来自Sencha论坛的chramer回答 - 我只需要更改以下代码：

saveValue: function(value) {
    var field = Ext.getCmp(this.fieldId);
    field.setValue(value);
}

要：

saveValue: function (value) {
    field = Ext.getCmp(this.fieldId);
    grid.getSelectionModel().getSelection()[0].set('value', value);
}

ExtJs属性网格自定义编辑器 - 从对话框窗口组合框更新值

2 个答案: