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

How to change title backgroundColor by using lookupReference in extjs

I m using lookuprefernce to get values. I want to change background color.
var LRMainPanelRef = this.lookupReference('MainPanelRef');
var titletext = LRMainPanelRef.items.items[1].title;
I want to set back color and want to use something like this
dont know how to do it ..I am trying this
LRFMainPanelRef.items.items[i].title.backgroundColor= "#FFEFBB";

You can change background color of title using getHeader().
Eg:
var mypanel = this.lookupReference('mypanel');//mypanel is reference of Component
mypanel.getHeader().setStyle('background-color', '#FFEFBB');
In this FIDDLE, I have created a demo. It's showing, how to change color of title bar uisng lookupReference. I hope this will help/guide you achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('MyViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myview',
// This method is called as a "handler" for the change color button in our view
onChnageColorClick: function () {
var mypanel = this.lookupReference('mypanel'),
header = mypanel.getHeader();
header.setStyle('background-color', '#FFEFBB');
header.el.down('div.demo-title').setStyle('background-color', '#ccc');
}
});
Ext.define('MyView', {
extend: 'Ext.Panel',
title: 'Demo',
controller: 'myview',
items: [{
xtype: 'button',
margin: 5,
text: 'Change BG Color of below panel title',
handler: 'onChnageColorClick', // calls MyViewController's onChnageColorClick method
}, {
xtype: 'panel',
title: 'Click to above to change My color <div class="demo-title">Hello I am DIV</div>',
reference: 'mypanel'
}]
});
new MyView({
renderTo: Ext.getBody(),
width: 400,
height: 200
});
}
});

Two bugs in scrollable accordion in ExtJS 6

I hit what seems to be two bugs. Here is a fiddle which demonstrates these bugs. First of all, if you click on the first panel or any other ones, you will see there appear some new panel with a missing title:
And the second bug, is that it is impossible to see the contents of the panel (one textfield, which I put to every panel). The code is as simple as:
Ext.create("Ext.window.Window", {
width: 300,
height: 400,
layout: "fit",
items:[{
xtype: "panel",
layout: {
type: "accordion"
},
scrollable: true,
listeners: {
beforerender: function () {
var i;
for (i = 0; i < 30; i += 1) {
this.add({
title: i,
items:[{
xtype: "textfield",
value: i
}]
});
}
}
}
}]
}).show();
So, the question is how to fix it all?

The outer window should not have a fit layout as this will interfere with the way the accordion layout works as it uses more or less vertical space depending on the user's actions. Also, the accordion should not have scrollable set to true as it is the parent window that should scroll.
The title you are using for the items in the accordion are seen as integer values in JS and so the 0 is not being interpreted as you would like when used in a title (which expects a string). Explicitly converting i to a string will ensure the 0 shows correctly.
In summary, the following changes will enable your code to work better:
On the outer window: remove the layout:fit and add scrollable:true.
On the accordion: remove the scrollable:true.
On the items in the accordion: ensure the title is consistently converted to a string.
See updated fiddle here.
Ext.create("Ext.window.Window", {
width: 300,
height: 400,
scrollable: true,
items: [{
xtype: "panel",
layout: {
type: "accordion"
},
listeners: {
beforerender: function () {
var i;
for (i = 0; i < 30; i += 1) {
this.add({
title: 'box ' + i,
items: [{
xtype: "textfield",
value: i
}]
});
}
}
}
}]
}).show();

Get label text extjs

Does anyone help me how to get label text?, It run if I use setText() but when I want to get it,I've tried with getText(), getLabel() it doesn't run. So I need help if you have an idea. Thanks
var lbl = {
xtype: 'label',
id: 'lblId',
text: 'Hello world!'
};
new Ext.Panel({
renderTo: Ext.getBody(),
width: 100,
height: 100,
items: [lbl,
{
xtype: 'button',
listeners: {
click: function () {
var label = Ext.get('lblId');
console.log(label.getText());
}
},
text: 'click here'
}]
});

You need to get the component.
console.log(label.component.text);

You can try :
App.label.getValue()

You can use the following in your click listener function:
var label = Ext.getCmp('lblId');
label.setText('the new text');
console.log(label.text);
This will get label as an Ext Js component and then you can change the text using .setText() and retrieve it using .text.
see Fiddle: https://fiddle.sencha.com/#fiddle/1jkb

You can try these three ways. First by directly accessing text, and the other forms is accessing the label's DOM object.
var lbl = {
xtype: 'label',
id: 'lblId',
text: 'Hello world!'
};
new Ext.Panel({
renderTo: Ext.getBody(),
width: 100,
height: 100,
items: [lbl,
{
xtype: 'button',
listeners: {
click: function () {
var label = Ext.getCmp('lblId');
console.log('Way 1: ' + label.text);
console.log('Way 2: ' + label.el.dom.innerHTML);
console.log('Way 3: ' + label.getEl().dom.innerHTML);
}
},
text: 'click here'
}]
});
<script src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all.js"></script>
<link type="text/css" rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css")/>

You can try with:
this.findById('lblId');
In AEM we can get the extjs label widget by
dialog.findById("lblId");

Ext.form.TextField: getValue() works but setValue(...) does not... why?

I'm creating a text field as follows
new Ext.form.TextField({
id: 'valueTxt',
xtype: 'textfield',
width: 170,
height: 35,
style: {'margin': '5px 5px 0px 5px'}
})
after that
alert(Ext.get('valueTxt').getValue());
is OK. But
Ext.get('valueTxt').setValue('hello');
says that Ext.get('valueTxt').setValue is undefined.
Can you tell me why?

Because Ext.get() return Ext.dom.Element, no Ext.Component.
Use Ext.getCmp():
Ext.getCmp('valueTxt').setValue('new value');

Try this way
Ext.get('valueTxt').set({value: 'hello'});