Develop Reference

How use add method Extjs component to another Extjs component (moderntoolkit)

How to add component to other, like a Ext.Viewport.add method?
For exaple I have defined panel, and want to add some component (panel) using function. I use 6.2.0, modern toolkit.
This example hasn't done positive result:
Ext.onReady(function(){
var bigPannel=Ext.create('Ext.Panel', {
title: 'Ext JS 4',
width: 300,
height: 200,
id : 'bigPannel',
renderTo: Ext.getBody()
});
Ext.getCmp('bigPannel').add({
title: 'panel2',
width: 100,
height: 100,
html:'Hello!'
});
})
Please help me understand, how to add component to other component.

I do not think you need to grab bigPannel with ext.getCmp.. instead get the var directly and add to it like this:
Ext.onReady(function () {
var bigPannel = Ext.create('Ext.Panel', {
title: 'Ext JS 4',
width: 300,
height: 200,
id: 'bigPannel',
renderTo: Ext.getBody()
});
bigPannel.add({
title: 'panel2',
width: 100,
height: 100
})
});

Show field label of a textfield?

I want to know the field label for a text field. Here's what i got so far:
var ok = Ext.ComponentQuery.query('textfield[itemId=fieldID]')[0];
//how to get the field label of that textfield????

You'll want to use the getFieldLabel() method as documented in sencha docs
Here is a fiddle demonstrating
Ext.ComponentQuery.query('#myField')[0].getFieldLabel()

{
xtype:'textfield',
fieldLabel: 'Locater',
width: 200,
id:'txtid',
labelWidth: 60,
padding: '0 0 0 5',
},
{
xtype: 'button',
handler: function () {
var f1 = Ext.getCmp('txtid').getFieldLabel();
alert(f1);
}
}

call a javascript/jquery function from JointJS Element/Node

I created a hyperlink element by jointjs. Now, I want to call a function from this element.
My Code is here:
new joint.shapes.custom.ElementLabelLink({
id: node.id.toString(),
size: { width: width, height: height },
attrs: {
a: { 'xlink:href': 'https://www.google.co.in', 'xlink:show': 'new', cursor: 'pointer''},
text: {
text: formattedNodeName,
'font-size': letterSize,
'font-family': 'Inspira',
'x-alignment': 'middle'},
rect: {
width: width, height: height,
rx: 5, ry: 5,
stroke: '#555',
fill: 'lightgreen'
}
}
});
In this code, what I have to add or there is some other way.
What I am trying to do, this is feasible or not?

I got a solution for my query. I am posting answer here; by which someone can get help. No need to do anything with Element or Link.
Just executed an event on paper div.
Here is the code:
paper.on('cell:pointerdblclick',function(cellView, evt, x, y) {
demo();
});
function demo(){
alert("1");
}
I am doing too many things inside pointerdblclick event call. Here is the idea by which some one can get help.

IE8 does not support italic tags in extjs4

I am trying to make my font italic. It works fine in all browsers except for IE8.
Is there a fix for this issue?
Here is the jsfddle:
{
xtype: 'text',
padding: '64 0 0 0',
text: "Logged in as:",
textAlign:'left',
style : "color:#3E546B;font-style:italic;font-size: 11px;",
width: 140
}
http://jsfiddle.net/YeyET/1/

I think what you really need is no a text but a displayfield instead.
This works ok in IE, Chrome and FF:
{
xtype: 'displayfield',
padding: '64 0 0 0',
fieldLabel: 'Logged in as:',
value: 'Lucas',
textAlign:'left',
labelCls: 'ital',
width: 140
}
Take a look at how it looks in jsfiddle.net: http://jsfiddle.net/lontivero/YeyET/6/

change color of xtype text in extjs4.1

I need to change the color of the text below. Everything else in the style field works except for the text color.
Can someone tell me what I am doing wrong here?
{
xtype: 'text',
text: "Logged in as:",
textAlign:'left',
style : "color:#3E546B;font-style:italic;font-family: tahoma, arial, verdana, sans-serif;font-size: 11px;",
width: 140,
handler: function() {
document.location.href="";
}
},
EDIT. I am not using a form panel, i am using xtype:text inside a container.
http://jsfiddle.net/nCkZN/4/ (this still uses form panel. But this is to show the text color does not change)

use fieldStyle instead of style
demo
Update
I confused 'text' and 'textfield'.
Now I've got it. The only way to change font style of Ext.draw.Text is to configure it with styleSelector (which has to refer to a valid css rule) like it is done in this demo.

Use The Fill in the Style As below use the type as text (Sprite) instead of using the Xtype as text
Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(),
width: 200,
height: 200,
items: [{
type: "text",
text: "Hello, Sprite!",
fill: "green",
font: "18px monospace"
}]
});