We Keep Coding

ExtJS Classic: When animating x/y/width/height of a window, the title is not ending at the final position specified

Using ExtJS Classic 7.3.0
Trying to animate the window while it is showing, but the title of the window is not ending up at the specifications in 'TO' config. Fiddle is here: Sencha Fiddle
If you try to drag the window by clicking on the "blue title", you will see the entire title how it should be, but thats it.
Anyone know if I need to specify something else here?

I tinkered with it a bit and found that it worked if you set the width property on the window:
width: Ext.getBody().getViewSize().width / 2,
Full code:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Window', {
id: 'win',
title: "Window",
width: Ext.getBody().getViewSize().width / 2,
html: "<h1>Hello</h1> ",
listeners: {
show: function (win) {
var el = win.getEl();
var size = Ext.getBody().getViewSize();
el.animate({
from: {
opacity: 0,
width: 0,
height: 0,
x: size.width/2,
y: size.height/2
},
to: {
opacity: 100,
width: size.width/2,
height: size.height/2,
x: size.width/4,
y: size.height/4
},
});
},
beforeclose: function (win) {
if (!win.shouldClose) {
win.getEl().fadeOut({
duration: 2000,
callback: function () {
win.shouldClose = true;
win.close();
}
});
}
return win.shouldClose ? true : false;
}
}
}).show();
}
});

width: '50%'
also seems to work.

QuaggaJs: Browser compatibility issue for barcode scanner

I am using QuaggaJs to scan the barcode. Everything is good and smooth for desktop version of scanner. But it gets broken when coming to mobile version of website and that too mainly on iPhone.
I tested in both safari and Chrome and for different phone it behaves differently. For some phone camera gets hang and for some camera didn't start at all.
Also, the canvas size is not setting up in the parent div. camera is getting outside the DOM.
Here is what I did.
HTML
<div class="scanner-box">
<div id="scanner-container" class="main_scanner"></div>
</div>
JS
$(document).ready(function(){
if($(".scanner-box").length > 0){
var canvas_width = $(".scanner-box").width();
var canvas_height = $(".scanner-box").height();
if (_scannerIsRunning) {
Quagga.stop();
} else {
startScanner(canvas_width,canvas_height);
}
}
}
var _scannerIsRunning = false;
function startScanner(canvasRatio,canvasHeight) {
Quagga.init({
inputStream: {
name: "Live",
type: "LiveStream",
target: document.querySelector('#scanner-container'),
constraints: {
width: "100%",
height: "100%",
facingMode: "environment"
},
},
decoder: {
readers: [
"ean_reader",
"ean_8_reader"
],
debug: {
showCanvas: true,
showPatches: true,
showFoundPatches: true,
showSkeleton: true,
showLabels: true,
showPatchLabels: true,
showRemainingPatchLabels: true,
boxFromPatches: {
showTransformed: true,
showTransformedBox: true,
showBB: true
}
}
},
},
function (err) {
if (err) {
$("#error").text(err);
return
}
console.log("Initialization finished. Ready to start");
Quagga.start();
_scannerIsRunning = true;
});
Quagga.onProcessed(function (result) {
var drawingCtx = Quagga.canvas.ctx.overlay,
drawingCanvas = Quagga.canvas.dom.overlay;
if (result) {
if (result.boxes) {
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
result.boxes.filter(function (box) {
return box !== result.box;
}).forEach(function (box) {
Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });
});
}
if (result.box) {
Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
}
if (result.codeResult && result.codeResult.code) {
Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
}
}
});
Quagga.onDetected(function (result) {
var barcodeResult = $("#result").text(result.codeResult.code);
var barcode = result.codeResult.code;
if(barcode.toString().length < '13'){
}else{
checkBarCode(barcode,canvasRatio,canvasHeight);
if (_scannerIsRunning) {
Quagga.stop();
}
}
console.log("Barcode detected and processed : [" + result.codeResult.code + "]", result);
});
}
CSS
.scanner-box{width:480px;height:320px;background-color:#9a9a9a;position:relative;margin-top:10px;}
#scanner-container{position:relative;height:inherit;}

#scanner-container canvas{
position: absolute;
left : 0px;
top: 0px;
}
this css is just like the sample form https://serratus.github.io/quaggaJS/v1.0.0-beta.1/examples/file_input/
it makes the canvas area which draws windows cover the camera steam area .

Draggable does not work in extjs6.5

I am using the below code -
afterListeners: function(thisEl, eOpts) {
sliderSprite = Ext.create('Ext.draw.sprite.Rect', {
width: spriteWidth, // half year width height : 20, x : 16, y : 0, draggable : true, floatable : true, 'stroke-width' : 2, fill : '#FCE5C5', stroke : '#C6B395' });
sliderSprite.show(true);
thisEl.getSurface().add(sliderSprite);
alert("before source");
new Ext.drag.Source({
element: sliderSprite,
constrain: {
// Drag only horizontal in 30px increments
horizontal: true, // snap: { // y: 30 // }
},
onDragMove: function() {
alert("inside source");
spriteHighlighter.remove();
me.onDragSprite(e, this, chartWidth, spriteWidth);
},
onDragEnd: function() {
me.refreshCharts(xPlots, bigChart, sliderSprite, firstYear, lastYear, chartWidth);
}
});
alert("outside source");
},
}
}
Now, the issue is, control doesn't go inside the Ext.drag.Source(). I get 2 alert messages ,before source and outside source. and because it doesn't go inside Ext.drag.Source().
The drag-able functionality of the element is not working. What should I do ?

First you need to be clear on which component you want to use. After that you need to put afterrender event on that component and inside of that event you can use Ext.drag.Source.
In this FIDDLE, I have created a demo using button and Ext.drag.Source.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
var buttons = [],
rendomColor = () => {
return "#" + ((1 << 24) * Math.random() | 0).toString(16);
};
for (var i = 0; i < 10; i++) {
buttons.push({
text: `Button ${i+1}`,
margin: 10,
style: `background:${rendomColor()}`
});
}
Ext.create({
xtype: 'panel',
height: window.innerHeight,
title: 'Ext.drag.Source Example',
defaults: {
xtype: 'button'
},
items: buttons,
renderTo: Ext.getBody(),
listeners: {
afterrender: function (panel) {
panel.items.items.forEach(item => {
new Ext.drag.Source({
element: item.el,
constrain: {
// Drag only vertically in 30px increments
//vertical: true,
snap: {
y: 1,
x: 1
}
}
})
})
}
}
});
}
});

Add port to a custom elements in jointJS

I am new to jointJs library and I am trying to add ports to my custom element that contains html code in it. I followed this tutorial (http://www.jointjs.com/tutorial/html-elements) and created my element. But when I try to add ports to it (based on this tutorial: http://www.jointjs.com/tutorial/ports) it does not work.
Another problem I have is that I want the textbox(textarea on my custom shape) to disappear when I click on the blank paper, and just the label with its content stays visible on the element. For that I used the following piece of code (but it does not give me the above-mentioned functionality):
paper.on('blank:pointerdown', function(evt, x, y) { this.$box.find('textarea').toBack(); });
this.model.on('cell:pointerclick', function(evt, x, y) {this.$box.find('textarea').toFront();});
My whole code is as below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="graph.css">
<script type="text/javascript" src="http://www.jointjs.com/downloads/joint.js" ></script>
<script src="http://www.jointjs.com/downloads/joint.shapes.devs.js" ></script>
<script src="http://www.jointjs.com/downloads/joint.shapes.devs.min.js" ></script>
</head>
<title>Test</title>
<body>
<div id="myholder"></div>
</body>
<script>
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 1500,
height: 700,
model: graph
});
// Create a custom element.
// ------------------------
joint.shapes.html = {};
joint.shapes.html.Element = joint.shapes.basic.Rect.extend({
defaults: joint.util.deepSupplement({
type: 'html.Element',
attrs: {
rect: { stroke: 'none', 'fill-opacity': 0 }
}
}, joint.shapes.basic.Rect.prototype.defaults)
});
// Create a custom view for that element that displays an HTML div above it.
// -------------------------------------------------------------------------
joint.shapes.html.ElementView = joint.dia.ElementView.extend({
template: [
'<div class="html-element">',
'<button class="delete">x</button>',
'<span id="lbl" value="Please write here"></span>',
'<textarea id="txt" type="text" value="Please write here"></textarea>',
'</div>'
].join(''),
initialize: function() {
_.bindAll(this, 'updateBox');
joint.dia.ElementView.prototype.initialize.apply(this, arguments);
this.$box = $(_.template(this.template)());
// Prevent paper from handling pointerdown.
this.$box.find('input,select').on('mousedown click', function(evt) { evt.stopPropagation(); });
// This is an example of reacting on the input change and storing the input data in the cell model.
this.$box.find('textarea').on('change', _.bind(function(evt) {
this.model.set('textarea', $(evt.target).val());
}, this));
this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
// Update the box position whenever the underlying model changes.
this.model.on('change', this.updateBox, this);
// Remove the box when the model gets removed from the graph.
this.model.on('remove', this.removeBox, this);
this.updateBox();
},
render: function() {
joint.dia.ElementView.prototype.render.apply(this, arguments);
this.paper.$el.prepend(this.$box);
this.updateBox();
return this;
},
updateBox: function() {
// Set the position and dimension of the box so that it covers the JointJS element.
var bbox = this.model.getBBox();
// Example of updating the HTML with a data stored in the cell model.
paper.on('blank:pointerdown', function(evt, x, y) { this.$box.find('textarea').toBack(); });
this.$box.find('span').text(this.model.get('textarea'));
this.model.on('cell:pointerclick', function(evt, x, y) { this.$box.find('textarea').toFront(); });
this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' });
},
removeBox: function(evt) {
this.$box.remove();
}
});
// Create JointJS elements and add them to the graph as usual.
// -----------------------------------------------------------
var el1 = new joint.shapes.html.Element({
position: { x: 600, y: 250 },
size: { width: 200, height: 100 },
inPorts: ['in'],
outPorts: ['out'],
attrs: {
'.inPorts circle': { fill: 'gray'},
'.outPorts circle': { fill: 'gray'}
},
textarea: 'Start writing'});
graph.addCells([el1]);
paper.on('cell:pointerdblclick', function(cellView, evt, x, y) {
var el2 = new joint.shapes.html.Element({ position: { x: 600, y: 400 }, size: { width: 200, height: 100 }, textarea: 'Start writing'});
var l = new joint.dia.Link({
source: { id: el1.id },
target: { id: el2.id },
attrs: { '.connection': { 'stroke-width': 1, stroke: 'gray' } }
});
graph.addCells([el2, l]);
});
</script>
</html>
I have searched a lot for answers to these problems but I was not successful finding simple and comprehensive ones.
Any help will be appreciated.
Thanks.

I am also new to jointJs and stuck with same problem and found this thread. I have tried and worked successfully.
You have to customize css of element to get better view. Go to working with ports for more work with ports.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://www.jointjs.com/downloads/joint.min.css">
<style type="text/css">
#myholder .html-element{
position: absolute;
margin-left: 8px;
padding: 5px 0 10px 0;
background-color: #fff;
border: 1px solid #eee;
border-radius: 5px;
pointer-events: none;
-webkit-user-select: none;
}
</style>
<script type="text/javascript" src="http://www.jointjs.com/downloads/joint.min.js" ></script>
</head>
<title>Test</title>
<body>
<div id="myholder"></div>
</body>
<script>
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 1500,
height: 700,
model: graph
});
// Create a custom element.
// ------------------------
joint.shapes.html = {};
joint.shapes.html.Element = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
markup: '<g class="rotatable"><g class="scalable"><rect/></g><g class="inPorts"/><g class="outPorts"/></g>',
portMarkup: '<g class="port<%= id %>"><circle/></g>',
defaults: joint.util.deepSupplement({
type: 'html.Element',
size: { width: 100, height: 80 },
inPorts: [],
outPorts: [],
attrs: {
'.': { magnet: false },
rect: {
stroke: 'none', 'fill-opacity': 0, width: 150, height: 250,
},
circle: {
r: 6, //circle radius
magnet: true,
stroke: 'black'
},
'.inPorts circle': { fill: 'green', magnet: 'passive', type: 'input'},
'.outPorts circle': { fill: 'red', type: 'output'}
}
}, joint.shapes.basic.Generic.prototype.defaults),
getPortAttrs: function (portName, index, total, selector, type) {
var attrs = {};
var portClass = 'port' + index;
var portSelector = selector + '>.' + portClass;
var portCircleSelector = portSelector + '>circle';
attrs[portCircleSelector] = { port: { id: portName || _.uniqueId(type), type: type } };
attrs[portSelector] = { ref: 'rect', 'ref-y': (index + 0.5) * (1 / total) };
if (selector === '.outPorts') { attrs[portSelector]['ref-dx'] = 0; }
return attrs;
}
}));
// Create a custom view for that element that displays an HTML div above it.
// -------------------------------------------------------------------------
joint.shapes.html.ElementView = joint.dia.ElementView.extend({
template: [
'<div class="html-element">',
'<button class="delete">x</button>',
'<span id="lbl" value="Please write here"></span>',
'<textarea id="txt" type="text" value="Please write here"></textarea>',
'</div>'
].join(''),
initialize: function() {
_.bindAll(this, 'updateBox');
joint.dia.ElementView.prototype.initialize.apply(this, arguments);
this.$box = $(_.template(this.template)());
// Prevent paper from handling pointerdown.
this.$box.find('input,select').on('mousedown click', function(evt) { evt.stopPropagation(); });
// This is an example of reacting on the input change and storing the input data in the cell model.
this.$box.find('textarea').on('change', _.bind(function(evt) {
this.model.set('textarea', $(evt.target).val());
}, this));
this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
// Update the box position whenever the underlying model changes.
this.model.on('change', this.updateBox, this);
// Remove the box when the model gets removed from the graph.
this.model.on('remove', this.removeBox, this);
this.updateBox();
this.listenTo(this.model, 'process:ports', this.update);
joint.dia.ElementView.prototype.initialize.apply(this, arguments);
},
render: function() {
joint.dia.ElementView.prototype.render.apply(this, arguments);
this.paper.$el.prepend(this.$box);
// this.paper.$el.mousemove(this.onMouseMove.bind(this)), this.paper.$el.mouseup(this.onMouseUp.bind(this));
this.updateBox();
return this;
},
renderPorts: function () {
var $inPorts = this.$('.inPorts').empty();
var $outPorts = this.$('.outPorts').empty();
var portTemplate = _.template(this.model.portMarkup);
_.each(_.filter(this.model.ports, function (p) { return p.type === 'in' }), function (port, index) {
$inPorts.append(V(portTemplate({ id: index, port: port })).node);
});
_.each(_.filter(this.model.ports, function (p) { return p.type === 'out' }), function (port, index) {
$outPorts.append(V(portTemplate({ id: index, port: port })).node);
});
},
update: function () {
// First render ports so that `attrs` can be applied to those newly created DOM elements
// in `ElementView.prototype.update()`.
this.renderPorts();
joint.dia.ElementView.prototype.update.apply(this, arguments);
},
updateBox: function() {
// Set the position and dimension of the box so that it covers the JointJS element.
var bbox = this.model.getBBox();
// Example of updating the HTML with a data stored in the cell model.
// paper.on('blank:pointerdown', function(evt, x, y) { this.$box.find('textarea').toBack(); });
this.$box.find('span').text(this.model.get('textarea'));
this.model.on('cell:pointerclick', function(evt, x, y) { this.$box.find('textarea').toFront(); });
this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' });
},
removeBox: function(evt) {
this.$box.remove();
}
});
// Create JointJS elements and add them to the graph as usual.
// -----------------------------------------------------------
var el1 = new joint.shapes.html.Element({
position: { x: 600, y: 250 },
size: { width: 170, height: 100 },
inPorts: ['in'],
outPorts: ['out'],
textarea: 'Start writing'
});
var el2 = new joint.shapes.html.Element({
position: { x: 600, y: 400 },
size: { width: 170, height: 100 },
inPorts: ['in'],
outPorts: ['out'],
textarea: 'Start writing'
});
graph.addCells([el1, el2]);
</script>
</html>

I have asked a question that no one has answered it. It was how I can make the textarea disappear when I click on the blank paper and appear when I click on the cell: First I thought I have to solve it through the jsonJS events inside the javascript. But I found out that there is a very simple solution for this. I just need to use the hover function in css styling and change the opacity from 0 to 1 when you hover over the box (in your css file) :
.html-element textarea {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
width: 150px;
border: none;
color: #333;
background-color: white;
padding: 5px;
margin: 5px;
opacity:0;
}
.html-element textarea:hover {
opacity:1;
}

rzkmr's answer worked for me, +1'd his response. (Thank you!)
In his example, to allow the textarea to be used, add this to the css:
.html-element select,
.html-element input,
.html-element textarea,
.html-element button {
/* Enable mouse interaction. */
pointer-events: auto;
}

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