How to return value from Ext.Dialog? - extjs

Question

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();
}
}
],
});

Answer 1

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();