Develop Reference

extjs 6.5.2 modern - beforeremove, beforeclose, close not firing

I've noticed that tabpanel's beforeremove and panel's beforeclose and close are not firing. On the other hand destroy event is working fine. Are there any workarounds or different events with the same results?
I've reproduced my observation at the example below.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'bottom',
items: [
{
xtype: 'panel',
title: 'Home',
iconCls: 'home',
html: 'Home Screen',
closable: true,
listeners: {
beforeclose: function () {
console.log('beforeclose');
},
close: function () {
console.log('close');
},
destroy: function () {
console.log('destroy');
}
}
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}
],
listeners: {
beforeremove: function () {
console.log('beforeremove');
}
}
});
}
});
Just add the example to sencha fiddle in Modern toolkit and open your browser's developer tools.
Also, beforeclose and close are firing fine if the panel is not inside a tabpanel.
Ext.create({
xtype: 'panel',
title: 'Panel Title',
iconCls: 'x-fa fa-html5',
height: 400,
width: 400,
bodyPadding: 12,
html: 'Sample HTML text',
renderTo: Ext.getBody(),
listeners: {
beforeclose: function () {
console.log('beforeclose');
},
close: function () {
console.log('close');
}
}
}).close();
UPDATES
-- It's a framework bug. So probably i'll have to wait for an update.
-- I accepted Marco's answer because it solves my issue. But it's a framework bug that it should be fixed in the next update.

Demo here: https://fiddle.sencha.com/#view/editor&fiddle/29dj
TL;DR listen to "deactivate" and "removed" events.
The user click happens on tab's bar (Ext.tab.Bar) and not on your panel, and the bar is part of Ext.tab.Panel (which extends Ext.Container).
Therefore the method called to close your tab is "onItemRemove" of Ext.tab.Panel, and not "close" of Ext.Panel.
This is the reason why your listeners don't work.
With the demo fiddle you can see all the events being fired by your Ext.Panel and use those events to do what you need.
EDIT
To show a confirmation message before closing here's the fiddle: https://fiddle.sencha.com/#view/editor&fiddle/29hl

Buttons not showing up when adding a Form Panel with buttons to an Ext.window.Window

Here's a description of my Fiddle
I have defined a Window and a Form Panel
I have created instances of the Window and the Form panel defined above
Added the Form panel to the Window
Called the .show() on the Window to show the window (which
now also includes the form)
The form Panel declaration includes the buttons. But now the buttons do not show up.
Ext.application({
name: 'My Window',
launch: function () {
Ext.define('MyWindow', {
extend: 'Ext.window.Window',
title: 'My Window'//,
// renderTo: Ext.getBody()
});
Ext.define('MyForm', {
extend: 'Ext.form.Panel',
bodyPadding: 5,
width: 350,
// The form will submit an AJAX request to this URL when submitted
url: '',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
}, {
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],
// Reset and Submit buttons
buttons: [{
text: 'Reset',
handler: function () {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true, //only enabled once the form is valid
disabled: true,
handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function (form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function (form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
}]
});
var myWindow = new MyWindow();
var myForm = new MyForm();
myWindow.items.add(myForm);
myWindow.show();
// var myForm = new MyForm();
}
});
Here's the fiddle
This must be related to some documented behavior of the Form or the Window. What could that be?
Also, architecturally, I would like to define these components separately and use them as needed. So is there a design pattern that is better than this?

Any component that is going to contain other components will generally need to have a layout specified. Add layout: 'fit' to your MyWindow config and it should work.
Google ExtJS MVC for guidelines on the recommended way to design ExtJS applications. I also find that the ExtJS 6 examples page can be quite useful. The KitchenSink one is nice because it contains a ton of different examples of small applications built using the MVC design pattern. (Pick an example from that link and then expand the Details pane on the right.)

I can't close dialog in jointJS

Here is and a screenshot I uploaded for you I have edited my post, according to your advice in comments, posting my updated version of my code.I enclose in /**/ my original post for helping you.
/*In jointJS I try using a `ui.dialog` to delete all my graph with the following code:
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Create new process',
content: '<b>Cleanup current drawing?</b>',
closeButton: false,
buttons: [
{ action: 'ok', content: 'OK' },
{ action: 'cancel', content: 'CANCEL' }
]
});
dialog.on('action:ok', this.graph.clear, this.graph);
dialog.on('action:cancel', dialog.close, dialog);
dialog.open();
},
After pressing OK button I successfully delete my graph but my dialog still remains without being able to delete it.
Any help please? */
Here is my updated code which unfortunately still doesn't work as expected. I remind you that in this dialog form which displays an OK and Cancel button I want the following ones:
1)When pressing OK I want to :
a)Delete my current graph And
b)Close my dialog
2)When pressing Cancel I want to:
Close my dialog (Which in my initial version worked successfylly with dialog.close)
openNew: function() {
// By pressing Create New Process button, a popup form asks for
//our confirmation before deleting current graph
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Create new process',
content: '<b>Cleanup current drawing?</b>',
closeButton: false,
buttons: [
{ action: 'ok', content: 'OK' },
{ action: 'cancel', content: 'CANCEL' }
]
});
//Since in 'action:ok' of dialog.on the 3rd parameter is used in the
//callback of multi_hand we must pass dialog and graph both together.To do so
//we enclose them in an object named together and we pass it instead
together= {dialog : dialog, graph : this.graph};
//Since jointJS supports assigning multiple events for same handler
//BUT NOT multiple handlers for the same event we create function multi_hand
multi_hand: function (together)
{
together.graph.clear();
together.dialog.close();
}
dialog.on('action:ok', multi_hand, together);
dialog.on('action:cancel', dialog.close, dialog);
dialog.open();
},
By using this new code my joinjtJS project crashes unexpectedly.
How will I make OK button work please?

The third argument in dialog.on is the context passed into the callback function (2nd argument). It says, what is bind to this in the callback function.
In your example is not clear where the graph is defined, if it is really this.graph. However, you can simply do it like in the following example, without passing the context:
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 650,
height: 400,
model: graph,
linkPinning: false
});
var r = new joint.shapes.basic.Rect({
position: { x: 50, y: 50 },
size: { width: 100, height: 40 },
}).addTo(graph);
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Confirm',
content: '<b>Are you sure?</b>',
buttons: [
{ action: 'yes', content: 'Yes' },
{ action: 'no', content: 'No' }
]
});
dialog.on('action:yes', function() {
graph.clear();
dialog.close()
});
dialog.on('action:no', dialog.close, dialog);
dialog.open();
if the graph is defined on this:
dialog.on('action:yes', function() {
this.graph.clear();
dialog.close();
}, this);

I solved my problem this way and I just want to share it with all of you as a reference.
openNew: function() {
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Create new process',
content: '<b>Cleanup current drawing?</b>',
closeButton: false,
buttons: [
{ action: 'ok', content: 'OK' },
{ action: 'cancel', content: 'CANCEL' }
]
});
dialog.on('action:ok', this.graph.clear, this.graph);
dialog.on('action:ok action:cancel', dialog.close, dialog);
dialog.open();
},

How to add an item to ext js panel on click of the panel?

I want to add a button into a panel to the exact position where I clicked.
SO I have tried like as follows, this the structure of my Ext.widget element
Ext.widget({
xtype : 'mz-form-widget',
itemId: 'shopableImage',
anchor: "100%",
defaults: {
xtype: 'textfield',
listeners: {
controller: '',
change: function (cmp) {
controller = cmp;
cmp.up('#shopableImage').updatePreview();
}
}
},
items: [
{
xtype: "tacofilefield",
itemId: "imageUploadButton",
text: "Upload images"
},
{
xtype: 'panel',
width: 350,
height: 350,
itemId:'container',
id:'container',
bodyStyle:{"background":"url('http://www.easyvectors.com/assets/images/vectors/vmvectors/jeans-girl-vector-27.jpg')","border":"1px solid #eee"},
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(a,b,c,d){
console.log(a.browserEvent.clientX - b.offsetLeft);
console.log(a.browserEvent.clientY - b.offsetTop);
console.log(c);
this.down('#container').addItem({"xtype":"button","text":"+"});
}
},
dblclick: {
element: 'body', //bind to the underlying body property on the panel
fn: function(){ console.log('dblclick body'); }
}
}
}
The following line throwing me error.
this.down('#container').addItem({"xtype":"button","text":"+"});
UPDATE
this.down('#container')
is returning null.
Please give me your suggestions regarding this?

There are two problems here, one is causing the error and another is a potential time bomb:
addItem does not exist, the correct method name is add
You use id's on components and that is a very bad practice, however, it does not the immediate cause of the error

When using setHandler in ExtJS button, the handler function was executed right away

I added a button to a panel. When you click the button, a popup window will show up. I tried to update the content of the popup using setHandler. But whenever setHandler was called, the handler function was executed right away. Here is the example code:
me.panels[i].getDockedItems()[0].setHandler(Popup({html: tiphtml}), this);
...
Popup = function(cfg) {
cfg = Ext.apply({
height: 100,
width: 200,
layout: 'fit'
}, cfg);
Ext.create('Ext.window.Window', {
title: cfg.title,
height: cfg.height,
width: cfg.width,
layout: cfg.layout,
html: cfg.html
}).show();
}

you need to nest your function in an anonymous function. You are actually calling the function in your code, not passing it. This will work:
me.panels[i].getDockedItems()[0].setHandler(function(){Popup({html: tiphtml})}, this);
...
Popup = function(cfg) {
cfg = Ext.apply({
height: 100,
width: 200,
layout: 'fit'
}, cfg);
Ext.create('Ext.window.Window', {
title: cfg.title,
height: cfg.height,
width: cfg.width,
layout: cfg.layout,
html: cfg.html
}).show();
}