CODEWITHSUNDEEP
extjs
Sap1234
Sap1234

Reputation: 147

How to return value from Ext.Dialog?

How to return value from Ext.Dialog? I think this is a very frequent task, but I could never find the appropriate answer. The two problems that I see here are: 1) how to return value from another dialog, and 2) how to wait for that value from the view the dialog has been called.
As for the first problem, one thing that pops up into my head is to write the value in the viewModel of the caller view, but I have no idea how to wait for that value.

I prepared a simple example, in which I need to create 'MyApp.view.main.MyView', but for that I need to know whether user selected A1, A2, A3 or A4.

onBtnClick: function(){
    
    //call Dialog
    Ext.create('MyApp.view.main.MyDialog', {}).show();

    //how to get value from dialog and wait for that here?
    
    //then call another view 
    Ext.create('MyApp.view.main.MyView', {
        type: type,
    }).show();
},

Ext.define('MyApp.view.main.MyDialog', {
    extend: 'Ext.Dialog',
    
    items: [
    {
        xtype: 'button',
        text: 'A1',
        handler: function(){
            this.up().close();
        }
    },
    {
        xtype: 'button',
        text: 'A2',
        handler: function(){
            this.up().close();
        }
    },
        {
        xtype: 'button',
        text: 'A3',
        handler: function(){
            this.up().close();
        }
    },
    {
        xtype: 'button',
        text: 'A4',
        handler: function(){
            this.up().close();
        }
    }
    ],
});

Upvotes: 0

Views: 315

Answers (1)

Arthur Rubens
Arthur Rubens

Reputation: 4706

You can use custom events:

Ext.define('MyApp.view.main.MyDialog', {
    extend: 'Ext.Dialog',

    items: [{
        xtype: 'button',
        text: 'A1',
        handler: function () {
            this.up('dialog').fireEvent('dialogbuttonclick', 'A1');
            this.up().close();
        }
    }, {
        xtype: 'button',
        text: 'A2',
        handler: function () {
            this.up('dialog').fireEvent('dialogbuttonclick', 'A2');
            this.up().close();
        }
    }, {
        xtype: 'button',
        text: 'A3',
        handler: function () {
            this.up('dialog').fireEvent('dialogbuttonclick', 'A3');
            this.up().close();
        }
    }, {
        xtype: 'button',
        text: 'A4',
        handler: function (btn) {
            this.up('dialog').fireEvent('dialogbuttonclick', 'A4');
            this.up().close();
        }
    }],
});

Ext.create('MyApp.view.main.MyDialog', {
    listeners: {
        'dialogbuttonclick': function (buttonId) {
            console.log(info.buttonId);
            /*Ext.create('MyApp.view.main.MyView', {
                type: buttonId,
            }).show();*/
        },
    }
}).show();

Upvotes: 1

Related Questions