Develop Reference

Label to flows in JointJS

I'm working with jointJs and Rappid. I know how to draw a bpmn diagram, as the photo I have attached. I'm drawing the elements, but I'm having some problems with rows (flows). Is there any way to add a flow label or name? As I added on my image in red color.
I have seen this in their documentation, but I can't see anything about labels
var flow = new joint.shapes.bpmn.Flow({
source: { id: task.id },
target: { id: annotation.id },
flowType: 'association'
});
Thanks,

You may want to look into dia.Link.prototype.labels, since BPMN Flows are just Links extensions (joint.shapes.bpmn.Flow = joint.dia.Link.extend({).
An example to your flow:
flow.label(0, // the label's index (you can have multiple labels per link/flow)
{
position: .5, // place it halfway on the link (0-1)
attrs: {
text: { fill: 'red', text: 'Label' }
}
}
);

ExtJs 6.5.2 modern - Remove loadmask message

I am using a loadmask that the html property holds all the loading content. The problem that i am facing is that even if message property's value is an empty string, message allocates space inside the loadmask producing something like a dash on the left of my html message.
(Add the code bellow to a Sencha Fiddle)
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create({
xtype: 'panel',
fullscreen: true,
html: '<h1>Hello World !!!</h1>',
listeners: {
painted: function (panel) {
panel.mask({
xtype: 'loadmask',
html: '<div align="center"><h3>Loading Mask</h3>' +
'<p>i am loading...</p></div>',
message: '', //empty message holds its opacity
indicator: false,
style: 'background:#d7ecfd'
});
}
}
});
}
});
How can i remove or make that space transparent?
Modern Toolkit does not have the useMsg property.
I've tried setting the background property (background: transparent) at messageCls but nothing happened.

I guess the sencha devs never thought of a scenario where the message field would go empty.
However you can correct it by adding the below style in the html.
<style>.x-mask-inner{background:rgba(0, 0, 0, 0) !important}</style>

I am looking into how to get the mouse position in a text field using Sencha

This is my first post, I can fill in further details if needed.
I am looking to get the xy position of the cursor when either Hour, Minute or Seconds are clicked. I am looking to use the positions for the stepper to act accordingly. The current code just responds with undefined. I am getting undefined because I am using extjs 4.2.2
{
xtype: 'spinnerfield',
itemId: 'time',
name: 'intime',
width: 125,
listeners: {
mousemove: {
element: 'el',
fn: function(e){
var event = e.event;
console.log(event.clientX);
}
}
},
step:1,
value:"11:11:21",

You can add a mousemove event listener to the el (or inputEl), for example:
xtype: 'textfield',
listeners: {
mousemove: {
element: 'el',
fn: function(e){
console.log(e.event);
}
}
}
A working example: https://fiddle.sencha.com/#fiddle/uke

Stack Overflow is amazing! I been banging my head for two days trying to figure this out. I Got it thanks to #CD.. I could use mousedown: to determine where in the box is clicked and use event.clientX to capture the X position. In extjs 4.2.2 you can use e.getX()

Display issue with ext js components when added dynamically at runtime

I am creating layout with ExtJs components and need to add widgets dynamically at run time. The code adds three containers to viewport, top, left and center tab panel. The tab panel further contains two tabs (Ex.panel.Panel) and the second tab contains an html Editor.
Code:
Ext.onReady(function () {
var vp = Ext.create("Ext.container.Viewport", {
layout: 'border'
});
var top = Ext.create("Ext.container.Container", {
renderTo: 'top',
height: 70,
region: 'north'
});
var left = Ext.create("Ext.panel.Panel", {
renderTo: 'left',
title: 'Menu',
split: true,
collapsible: true,
width: 270,
region: 'west'
});
var center = Ext.create("Ext.tab.Panel", {
renderTo: 'center',
region: 'center',
});
vp.add(top);
vp.add(left);
vp.add(center);
var tab1 = Ext.create("Ext.panel.Panel", {
renderTo: "tab1",
layout: "fit",
title: "Tab-1"
});
var tab2 = Ext.create("Ext.panel.Panel", {
renderTo: "tab2",
layout: "fit",
title: "Tab-2: Editor"
});
center.add(tab1);
center.add(tab2);
var editor = Ext.create("Ext.form.HtmlEditor", {
renderTo: "editor"
});
tab2.add(editor);
//center.doLayout();
});
The problem is that the editor is not displayed within second tab instead it displays on top. However when I click on second tab then it automatically corrects the layout and display html editor at correct position. But still the html editor does not allow to type.
Furthermore, I have observed that the documentation does not include examples of creating layout at run time, all examples demonstrate design time creation of layouts.
I also tried TabPanel.doLayout() method after adding tabs and html editor but still it does not correct the display issue. Please share if there is any idea on how to add components dynamically in ExtJs.
JS Fiddle
http://jsfiddle.net/uZGxS/

I have found the solution to the tab issues. While adding new tab to tab panel if we set it active then the child components will render correctly. In this case now the html editor layout renders and displays at correct position.
center.add(tab1);
center.setActiveTab(tab1);
center.add(tab2);
center.setActiveTab(tab2);
JSFIDDLE:
http://jsfiddle.net/uZGxS/1/

How to expand an ExtJS Component to fullscreen and restore it back later?

how can I expand an ExtJS (version 3.3.1) Component, e.g. a Ext.Panel nested somewhere in the document hierarchy to "fullscreen" so that it takes up the whole browser window region? I guess I need to create an Ext.Viewport dynamically and reparent the component being "expanded", but I've had no success so far. Could someone provide a working sample?
Also, I'd like to be able to restore the component to its original place at some point later, if that's at all possible.
I tried the following:
new Ext.Button({ text: 'Fullscreen', renderTo : Ext.getBody(), onClick: function(){
var viewPort = new Ext.Viewport({
renderTo: Ext.getBody(),
layout: "fit",
items: [ panelToBeExpanded ]
});
viewPort.doLayout();
}});
which does not work very well. Upon clicking the button, the panel panelToBeExpanded seems to take up the viewport region, but only if there is no HTML in the BODY section, otherwise viewport is not fully expanded. Also, working with the reparented panel afterwards causes weird flicker in most browsers.
Is there a reliable way to universally (ideally temporarily) expand a component to the whole browser window?
UPDATE
Thanks to a suggestion in the comments, creating a new maximized Ext.Window seems to be a good solution. The second part is a bit tricky though - how to move the reparented component back to its original place in DOM (and ExtJS component hierarchy) once the window is closed?
Thanks for your help!

You could use Ext.Window.toggleMaximize method. I created a simple working example, check it out here
Pay attention that Ext.Window is maximized inside its rendering container, so if you use "renderTo" attribute and set it to some div inside your page Window will only be as big as div that contains it. That is why I used document body to render myWindow. Of course you could also use Ext.Window.x and Ext.Window.y configuration attributes to locate your window in wanted place.

This is a little late but stumbled upon this only now and remembered I had to do something similar and ended up overriding the text-area component which would automatically expand to full-screen on doubleclick by creating a copy of the component in a full-size window. On closing the values are automatically updated in the instantiating component which was hidden behind the full-screen window and hence never was taken out of the dom in the first place.
Here's my code I think it's fairly self-explanatory.
Hope it helps someone!
Rob.
/**
* Override for default Ext.form.TextArea. Growing to near full-screen/full-window on double-click.
*
* #author Rob Schmuecker (Ext forum name rob1308)
* #date September 13, 2010
*
* Makes all text areas enlargable by default on double-click - to prevent this behaviour set "popout:false" in the config
* By default the fieldLabel of the enhanced field is the fieldLabel of the popout - this can be set separately with "popoutLabel:'some string'" this will also inherit the same labelSeparator config value as that of the enhanced parent.
* The close text for the button defaults to "Close" but can be overriden by setting the "popoutClose:'some other text'" config
*/
Ext.override(Ext.form.TextArea, {
popout: true,
onRender: function(ct, position) {
if (!this.el) {
this.defaultAutoCreate = {
tag: "textarea",
style: "width:100px;height:60px;",
autocomplete: "off"
};
}
Ext.form.TextArea.superclass.onRender.call(this, ct, position);
if (this.grow) {
this.textSizeEl = Ext.DomHelper.append(document.body, {
tag: "pre",
cls: "x-form-grow-sizer"
});
if (this.preventScrollbars) {
this.el.setStyle("overflow", "hidden");
}
this.el.setHeight(this.growMin);
}
if (this.popout && !this.readOnly) {
if (!this.popoutLabel) {
this.popoutLabel = this.fieldLabel;
}
this.popoutClose = 'Close';
var field = this;
this.getEl().on('dblclick',
function() {
field.popoutTextArea(this.id);
});
};
},
popoutTextArea: function(elId) {
var field = this;
tBox = new Ext.form.TextArea({
popout: false,
anchor: '100% 100%',
labelStyle: 'font-weight:bold; font-size:14px;',
value: Ext.getCmp(elId).getValue(),
fieldLabel: field.popoutLabel,
labelSeparator: field.labelSeparator
});
viewSize = Ext.getBody().getViewSize();
textAreaWin = new Ext.Window({
width: viewSize.width - 50,
height: viewSize.height - 50,
closable: false,
draggable: false,
border: false,
bodyStyle: 'background-color:#badffd;',
//bodyBorder:false,
modal: true,
layout: 'form',
// explicitly set layout manager: override the default (layout:'auto')
labelAlign: 'top',
items: [tBox],
buttons: [{
text: field.popoutClose,
handler: function() {
Ext.getCmp(elId).setValue(tBox.getValue());
textAreaWin.hide(Ext.getCmp(elId).getEl(),
function(win) {
win.close();
});
}
}]
}).show(Ext.getCmp(elId).getEl());
}
});