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

Ext.Component.setStyle('color', 'value') does not seem to work

I have two buttons, the idea is to click one and have the text of the other change color i.e. if button one is clicked, the text of button two changes from its current color to blue and vice-versa.
I'm getting a reference to the buttons and calling setStyle on the reference but it seems not to work. Any insight is welcome. Code snippet can be found below:-
{
xtype: 'button',
text: 'Foo',
id: 'foo',
ui: 'plain',
toggleGroup: "buttonToggle",
listeners: {
click: "onFooButtonClick",
afterrender: 'onButtonsRendered'
},
toggleHandler: "onButtonToggled"
},
{
xtype: 'tbseparator'
},
{
xtype: 'button',
text: 'Bar',
id: 'bar',
ui: 'plain',
toggleGroup: "buttonToggle",
listeners: {
click: "onBarButtonClick",
afterrender: 'onButtonsRendered'
},
toggleHandler: "onButtonToggled"
}
// Controller.js
onButtonToggled: function(button, state) {
var clickedButton = button.id;
button.btnInnerEl.setStyle('color', 'black');
if (clickedButton === "foo") {
var btnBar = Ext.getCmp('bar');
btnBar.setStyle('color', 'blue');
} else if (clickedButton === "bar") {
var btnFoo = Ext.getCmp('foo');
btnFoo.setStyle('color', 'blue');
}
}

Your 'setStyle' method is wrong. You have to use curly braces and need to add color as a key-value manner like this:
So you need to replace below code:
btnBar.setStyle('color', 'blue');
btnFoo.setStyle('color', 'blue');
button.btnInnerEl.setStyle('color', 'black');
with this:
btnBar.setStyle({'color': 'blue'});
btnFoo.setStyle({'color': 'blue'});
button.btnInnerEl.setStyle({'color': 'black'});
Hope it helps.

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

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

add event to x-axis labels of bar highchart

I am trying to retrieve the text of a label on the char x-axis by clicking on it. I am using bar chart and the code is the following:
var chart = new Highcharts.Chart({
chart: {
type: 'column',
backgroundColor: '#eaedf1',
zoomType: 'x',
renderTo: 'container'
},
plotOptions: {
series: {
cursor: 'pointer',
pointWidth: 10,
point: {
events: {
click: function (event) {
console.log(event.point.name + " " + this.y);
}
}
}
}
},
title: {
text: 'Total Flow Types'
},
xAxis: {
type: 'category',
labels: {
rotation: -90
}
},
yAxis: {
min: 0,
title: {
text: 'millions'
}
},
legend: {
enabled: false
},
series: [{
name: 'Flow Types'
}]
});
Then by clicking on a button the chart gets populated using ajax which works fine. By checking the dom of the chart I saw that each of the labels is text /text. They are part of g/ element with a class highcharts-axis-labels highcharts-xaxis-labels. So I've tried retrieving the values using jquery like:
$('body').on('click', 'g.highcharts-axis-labels.highcharts-xaxis-labels text', function () {
console.log($(this).text());
});
or just
$('body').on('click', 'text', function () {
console.log($(this).text());
});
This all is part of the document.ready function. Unfortunately none of these retrieves the text of a x-axis label?

Instead of:
$('body').on('click', 'g.highcharts-axis-labels.highcharts-xaxis-labels text', function () {
console.log($(this).text());
});
Use this:
$('.highcharts-xaxis-labels text').on('click', function () {
console.log($(this).text());
});
You should not connect classes highcharts-axis-labels and highcharts-xaxis-labels with a dot. And also the class highcharts-xaxis-labels is enough to add the event on. Here's the fiddle: http://jsfiddle.net/8sxLr5j8/

You can use extension which allows do it.