We Keep Coding

Extjs 6: Adding modal window doesn't mask tbar and header

I have a view which act as container for my grid.
This view owns a tbar and a header.
When I add a modal window, the header and the tbar aren't masked.
Mainview:
Ext.define('myApp.view.customer.MyMain', {
extend: 'Ext.panel.Panel',
xtype: 'hlx-customermain',
controller: 'maintoolbar',
plugins: 'viewport',
header: {
xtype: 'myheader'
},
tbar: {
xtype: 'mytoolbar'
},
items: [
{
xtype: 'mygrid'
}
]
});
Grid (which uses the controller to add the window)
Ext.define('myApp.view.customer.MyGrid', {
extend: 'Ext.grid.Panel',
xtype: 'mygrid',
tbar: {
xtype: 'mygridtoolbar'
},
controller: 'mygrid',
store: 'MyGridStore',
columns: [
...
]
});
Function from the ViewController
onCustomerAddClick: function () {
var me = this,
addCustomerWindow = me.lookupReference('addCustomerWindow');
if (!addCustomerWindow) {
addCustomerWindow = new myApp.view.customer.AddCustomer();
me.getView().ownerCt.add(addCustomerWindow);
}
addCustomerWindow.show();
}
Even tough I add it to the ownerContainer - which is the MyMain-class - the tbar and the header aren't masked.
See this fiddle to experience the error yourself: https://fiddle.sencha.com/#fiddle/uih

You don't have to add it to it's owner or what so ever. Just do this:
onAddCustomerClick: function () {
/*var me = this,
myWindow = me.lookupReference('myWindow');
if (!myWindow) {
myWindow = new MyWindow();
me.getView().ownerCt.add(myWindow);
}
myWindow.show();*/
var myWindow = Ext.create('MyWindow');
myWindow.show();
}

document.Body ComponentQuery

I am using an awesome html2canvas function but I have a noob question. How do I change the field it is capturing from document.body to a specific panel?
In short i need to change document.body to the panel I want to capture, I just don't know the code to get the panel I want.
I have tried Ext.ComponentQuery.query('#testPanel') without any success.
testButtonClicked: function (btn) {
html2canvas(document.body, {
onrendered: function (canvas) {
new Ext.Window({
title: 'Screenshot',
//width: 500,
height: 800,
resizable: true,
autoScroll: true,
preventBodyReset: true,
html: '<img src="' + canvas.toDataURL("image/png") + '" height="800"/>'
}).show();
}
});

You want getEl().dom. Here's a standalone example (tested with Ext 4.2.x):
Ext.onReady(function () {
Ext.define('Panel', {
extend: 'Ext.panel.Panel',
frame: true,
title: 'Test Panel',
width: 300,
height: 300,
onClick: function () {
html2canvas(this.getEl().dom, {
onrendered: function (canvas) {
new Ext.Window({
title: 'Screenshot',
width: 300,
height: 300,
html: '<img src="' + canvas.toDataURL("image/png") + '"/>'
}).show();
}
});
},
initComponent: function () {
var config = {
items: [
{
xtype: 'datepicker'
},
{
xtype: 'button',
text: 'CAPTURE THIS PANEL',
handler: this.onClick,
scope: this
}
]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.callParent(arguments);
}
});
var panel = Ext.create('Panel', {
renderTo: Ext.getBody()
});
});

html2canvas() appears to require a DOM element. Ext.ComponentQuery.query() returns an array of matched elements, so if you use precisely the code you provided, it won't work since the array returned from query() is obviously not a DOM element.
So if query() is actually returning something, you could use the first position:
Ext.ComponentQuery.query("#testPanel")[0]
Or, since you seem to have an ID assigned to the panel, you could simply use getCmp(), which will return only the element which is matched, and not an array:
Ext.getCmp( "testPanel" )

A unique pop-up called from different buttons - ExtJS

My aim is simple, for some needs, I have to test the "pop-up function" in ExtJS via the widget.window.
I've created a button in HTML and a pop-u in a JS file, when I click it, everything works fine, the pop-up is well displayed.
The HTML button is coded this way :
<input type="button" id="popup-map" value="Pop Up"/>
And the JS refers to the button this way :
Ext.application({
name: 'popup',
launch: function() {
var popup,
button = Ext.get('popup-map');
button.on('click', function(){
if (!popup) {
popup = Ext.create('widget.window', {
title: 'Pop-Up',
header: {
titlePosition: 2,
titleAlign: 'center'
},
border: false,
closable: true,
closeAction: 'hide',
width: 800,
minWidth: 400,
maxWidth: 1200,
height: 500,
minHeight: 550,
maxHeight: 800,
tools: [{type: 'help'}],
layout: {
type: 'border',
padding: 2
},
items: [
{
region: 'center',
xtype: 'tabpanel',
items: [
mappanel,
{
title: 'Description',
html: 'Attributs de l\'objet sous forme de tableau'
}
]
}
]
});
}
button.dom.disabled = true;
if (popup.isVisible()) {
popup.hide(this, function() {
button.dom.disabled = false;
});
} else {
popup.show(this, function() {
button.dom.disabled = false;
});
}
});
Problem, if I have two buttons that contains the id "popup-map", only the first one declared is working. I guess it's pretty normal the way I've coded it.
How can I call the popup contains in the JS file by clicking several buttons in HTML ?
Thanks :-)

Use a CSS class instead of a duplicated id. Duplicated ids are bad, you know that... Then use Ext.query instead of Ext.get. Your code should look something like this:
Ext.onReady(function() {
var popup;
function handler(button) {
if (!popup) {
// ...
}
// you've got button and popup, do your things
}
// adds the handler to every button with class 'popup-map' on the page
Ext.query('button.popup-map', function(button) {
button.on('click', handler);
});
});
I'm using Ext.onReady to wait for the DOM to be ready before searching for buttons on the page. That also gives us a closure for our local variables popup and handler.

Thanks to #rixo, here's the code working.
I've created a empty css class called customizer.
Ext.onReady(function() {
var popup, popup_visible;
function popup_constructor() {
//alert(this.getAttribute('pwet'));
if (!popup) {
popup = Ext.create('widget.window', {
title: 'Pop-Up',
id: 'popup',
header: {
titlePosition: 2,
titleAlign: 'center',
height: 30
},
border: false,
closable: true,
closeAction: 'hide',
width: 800,
minWidth: 400,
maxWidth: 1200,
height: 500,
minHeight: 550,
maxHeight: 800,
tools: [{type: 'help'}],
layout: {
type: 'border',
padding: 10
},
items: [
{
region: 'center',
xtype: 'tabpanel',
plain: true,
items: [
{
title: 'Carte',
html: 'On mettra la carte ici',
border: false,
},
{
title: 'Description',
html: 'Attributs de l\'objet sous forme de tableau',
border: false,
}
]
}
]
});
}
popup_visible = true;
if (popup.isVisible())
{
popup.hide(this, function() {
popup_visible = false;
});
}
else
{
popup.show(this, function() {
popup_visible = false;
});
}
}
var popup_show = Ext.query('.customizer');
Ext.each(popup_show, function (item) {
item = Ext.get(item);
item.on('click', popup_constructor);
}, this);
});

ExtJS drag event listeners work differently on Chrome and Firefox

I have added an input field to Window's title bar (header). On Chrome selecting and editing the input field works, and I can still drag the window around. On Firefox I can drag the window around the viewport, but I am unable to select the input field and edit it. How should I correct this code so that it would work on both browsers?
Quick'n'dirty demonstration of the problem:
Ext.define('Demo.DemoWindow', {
extend: 'Ext.window.Window',
xtype: 'demowindow',
height: 300,
width: 400,
title: 'Window',
autoShow: true,
items: [{
xtype: 'button',
text : 'Press!',
listeners: {
click: function() {
var win = this.up('window');
var header = win.getHeader();
header.setTitle('');
var killDrag = false;
var dragEvent = win.dd.on({
beforedragstart: function(dd, e) {
if (killDrag) {
return false;
}
}
});
var field = Ext.create('Ext.form.field.Text', {
name: 'Title',
allowBlank: false,
value: 'Type here something!',
listeners: {
el: {
delegate: 'input',
mouseout: function() {
killDrag = false;
},
mouseenter: function() {
killDrag = true;
}
}
}
});
header.insert(0, field);
}
}
}]
});
Ext.application({
name: 'Demo',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'absolute',
items: [
{
xtype: 'demowindow',
x: 20,
y: 20,
}
]
});
}
});

Using the mouseover event instead of mouseenter seems to work well with both.

How can i insert an handler for an HTML object?

question is simple!
I have an object like this:
new Ext.Panel({
id: 'Panel',
fullscreen: true,
dockedItems: [
dock:...,
width: ...,
listeners: { el: /*TOUCHEVENTS*/ },
html: '<object id='objectID' data="blabla"/>'
]
});
How can i add an event (like tap or pinch) on the HTML object with id= ObjectID ???
Thanks in advance ;)

I suggest you to use event delegation to makes possibile what you request.
Event delegation allow you to set tap listeners on a specific target on your panel inner HTML object. I write you an example that show you how to do that:
Ext.setup({
onReady: function() {
//Definition of a handler function
var myHandler = function(){
Ext.Msg.alert('What???','Did you Tap me?');
};
//Definition of a simple Panel
var p = new Ext.Panel({
fullscreen: true,
dockedItems: [{
xtype: 'panel',
dock: 'top',
height: '30',
html: '<div id="myObject">Tap me please</div>',
listeners: {
body: {
tap: myHandler,
delegate: '#myObject'
}
}
}]
});
}
});
If you run this code, you will see that, when you tap on the "Tap me Please!" div, your event will be fired.
Hope this helps.

Something like:
var p = new Ext.Panel({
id: 'Panel',
fullscreen: true,
dockedItems: [
html: '<object id='objectID' data="blabla"/>'
]
});
p.on('render', function() {
Ext.get("objectID").on('click', function() {
alert('imclicket');
});
});