ExtJS: проблема с областью в классе

Question

Я продолжаю сталкиваться с проблемой выбора точного компонента с областью применения.Как вы заметите ниже, я создал 2 разные функции внутри gridpanel.Один из них создает Ext.MessageBox для confirm.А другая функция создает Ext.window.Window в зависимости от button щелчка MessageBox.

Дело здесь;Он должен destroy связан component с кнопками cancel и no.Обе кнопки всегда указывают на gridpanel из-за состояния var me = this и уничтожают сам gridpanel.

Как я могу указать destroy метод непосредственно на связанный component?

Ext.define('MyApp.FooGrid', {
    extend: 'Ext.grid.Panel',

    reference: 'fooGrid',

    getGridMenu: function () {
    // Here is the 'Update' function; with right-click user being able to see `contextmenu`
        var me = this;

        var ret = [
            {
                text: 'Update',
                listeners: {
                    click: me.onUpdate,
                    scope: me
                }
            }
        ];

        return me.callParent().concat(ret);
    },

    onUpdate: function () {
        var me = this,
            gridRec = this.getSelectionModel().getSelection(); // Here being able to retrieve row data.

        Ext.MessageBox.confirm(translations.confirm, translations.confirmChange, me.change, me);

        return gridRec;
    },

    change: function (button) {
        var me = this;
        var selectedRec = me.onUpdate();
        var selectedRecEmail = selectedRec[0].data.email; //Retrieves selected record's email with right-click action           

        if (button === "yes") {
            return new Ext.window.Window({
                alias: 'updateWin',
                autoShow: true,
                title: translations.update,
                modal: true,
                width: 350,
                height: 200,
                items: [
                    {
                        xtype: 'container',
                        height: 10
                    },
                    {
                        xtype: 'textfield',
                        width: 300,
                        readOnly: true,
                        value: selectedRecEmail //Display selected record email
                    },
                    {
                        xtype: 'textfield',
                        width: 300,
                        fieldLabel: translations.newPassword
                    }
                ],
                dockedItems: [
                    {
                        xtype: 'toolbar',
                        dock: 'bottom',
                        items: [
                            {
                                xtype: 'tbfill'
                            },
                            {
                                xtype: 'button',
                                text: translations.cancel,
                                listeners: {
                                    click: function () {
                                        me.destroy(); // Here is the bug: When user clicks on this button; should destroy current window but it destroys 'gridpanel' itself
                                    }
                                }
                            },
                            {
                                xtype: 'button',
                                text: translations.save,
                                listeners: {
                                    click: function () {
                                        console.log("I'll save you!");
                                    }
                                }
                            }
                        ]
                    }
                ]
            });
        } else {
            console.log('this is no!');
            me.destroy(); // Another bug raises through here: If user will click on No then 'messagebox' should destroy. This one is destroys the gridpanel as well.
        }
    }
});

Answer 1

Как я могу указать метод уничтожения непосредственно на связанный компонент?

Во-первых, при нажатии кнопки подтверждения (No), вам не нужно уничтожать, она автоматически скроеткаждый раз, когда вы щелкаете в No.

И для обновления window вместо использования me.destroy() вам нужно использовать непосредственно button.up('window').destroy(), поэтому оно будет уничтожать только ваше окно обновления, а не grid.

А также вам не нужно снова вызывать me.onUpdate() внутри функции change, в противном случае она снова покажет окно подтверждения.Вы можете напрямую получить выбранную запись в функции change, например: me.getSelection().

. В этом FIDDLE я создал демонстрационную версию с использованием вашего кода, и яприложил свои усилия, чтобы получить результат.Надеюсь, что это поможет / поможет вам достичь ваших требований.

КОД SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'demostore',
            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'Lisa',
                email: 'lisa@simpsons.com',
                phone: '555-111-1224'
            }, {
                name: 'Bart',
                email: 'bart@simpsons.com',
                phone: '555-222-1234'
            }, {
                name: 'Homer',
                email: 'homer@simpsons.com',
                phone: '555-222-1244'
            }, {
                name: 'Marge',
                email: 'marge@simpsons.com',
                phone: '555-222-1254'
            }]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Demo GRID',
            store: 'demostore',
            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone'
            }],
            height: 200,

            listeners: {
                itemcontextmenu: function (grid, record, item, index, e, eOpts) {
                    e.stopEvent();
                    grid.up('grid').getGridMenu().showAt(e.getXY());
                }
            },

            renderTo: Ext.getBody(),

            getGridMenu: function () {
                var me = this;
                if (!me.contextMenu) {
                    me.contextMenu = Ext.create('Ext.menu.Menu', {
                        width: 200,
                        items: [{
                            text: 'Update',
                            handler: me.onUpdate,
                            scope: me
                        }]
                    });
                }
                return me.contextMenu;
            },

            onUpdate: function () {
                var me = this;

                Ext.MessageBox.confirm('Confirmation ', 'Are your sure ?', me.change, me);
            },

            change: function (button) {
                var me = this,
                    selectedRecEmail = me.getSelection()[0].data.email; //Retrieves selected record's email with right-click action

                if (button === "yes") {
                    return new Ext.window.Window({
                        autoShow: true,
                        title: 'Update',
                        modal: true,
                        width: 350,
                        height: 200,
                        items: [{
                            xtype: 'tbspacer',
                            height: 10
                        }, {
                            xtype: 'textfield',
                            width: 300,
                            readOnly: true,
                            value: selectedRecEmail //Display selected record email
                        }, {
                            xtype: 'textfield',
                            inputType:'password',
                            width: 300,
                            fieldLabel: 'New Password'
                        }],
                        dockedItems: [{
                            xtype: 'toolbar',
                            dock: 'bottom',
                            items: [{
                                xtype: 'tbfill'
                            }, {
                                xtype: 'button',
                                text: 'cancel',
                                listeners: {
                                    click: function (btn) {
                                        btn.up('window').destroy(); // Here is the bug: When user clicks on this button; should destroy current window but it destroys 'gridpanel' itself
                                    }
                                }
                            }, {
                                xtype: 'button',
                                text: 'save',
                                listeners: {
                                    click: function () {
                                        console.log("I'll save you!");
                                    }
                                }
                            }]
                        }]
                    });
                }
            }
        });

    }
});