We Keep Coding

How to make ExtJS closabel component

My requirement is that I need one container with "X" in top right corner of container. On click of X the container should get disappear. Logic is not a problem for me.I want a container with "X" on top right.
Here is what I am trying
var myBtn =Ext.create('Ext.Button', {
text: 'x',
handler: function() {
/*this.container.component.removeAll();
this.container.component.updateLayout();*/
}
});
myFields.push(me.getField(selectedRecord));
myFields.push(btn);
me.add({
xtype: 'container',
margin: '0 6',
draggable: true,
reorderable: true,
height: 50,
items: dropField,
listeners: {
render: function() {
new Ext.dd.DragDrop(this.body, "myGrp");
}
}
});
in `getField` method I am getting "textfield component". Can anybody help me to get that closable container. I am trying with panel but there I am getting only "X". textfield component is missing.

Try to use panel component with closable property

ChartJS doughnut legend click

I have a problem with custom onClick function on doughnut chart.
The only thing I need is to override default legend onClick function calling the original one + my custom code.
Following their official documentation and this suggestion on github page I wrote this js
var defaultLegendClickHandler = Chart.defaults.doughnut.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
console.log(legendItem);
defaultLegendClickHandler.call(this, e, legendItem);
};
Then I associate it to the onClick option (JSfiddle here) but it is not working. It seems that the legendItem variable is always an empty array so the default click function does nothing.

Your JSfiddle looks fine except that the newLegendClickHandler is defined at the wrong place inside options. You should define it inside legend as follows.
legend: {
position: 'top',
onClick: newLegendClickHandler
},
Please also check Custom On Click Actions from Chart.js
documentation

The click handler was set to the chart itself and not the legend. Move the new onClick handler inside of the legend options.
var options = {
cutoutPercentage: 20,
responsive: true,
legend: {
position: 'top',
onClick: newLegendClickHandler,
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
};

ExtJS qtip is not getting displayed

I have a grid panel and im trying to display a hover popup on a particular column. I have tried both tooltip and qtip but they are just not getting displayed. My grid panel looks as:
Ext.create('Ext.grid.Panel', {
id: 'frPanel-'+interfaceId,
store: frStore,
columns : [ {text : 'Source',
dataIndex : 'source',
renderer : function(value) {
return convertObjValue(value);
},
listeners: {
afterrender: function ()
{
Ext.create('Ext.tip.ToolTip',
{
target: this.el,
trackMouse: true,
html: "Hello there"
});
}
}
}, {
text : 'Destination',
dataIndex : 'destination',
menuDisabled : true,
renderer : function(value, metaData) {
var newValue = convertObjValue(value);
metaData.tdAttr = 'data-qtip="' + newValue + '"';
return newValue;
}
}
What am i doing wrong here? Any help how i can achieve this?
EDIT : So i made the second column work by adding Ext.QuickTips.init(); in the onReady() function. But i still wanna know how to make it work using the approach in first column.

kendo ui grid batch editing, set focus

I working on a kendo ui grid. The grid is not-editable as default.
In the toolbar is a 'edit' button. When the user clicks on it, the grid should be editable in batch mode like this.
The only solution to get this work is remove and recreate the grid/datasource with new properties (editable:true etc).
This works as expected. Now I want to set the focus on the first row/cell, so that the user can see that the grid is editable now (in the example below the row becomes an input field).
Any suggestions for this?
Here is a fiddle for this.
$('.k-grid-edit').on('click', function (e) {
e.preventDefault();
// remove old grid
$('#grid').html('');
// recreate grid with edit: true and new datasource
$('#grid').kendoGrid({
dataSource: dataSourceInEdit,
editable: true,
columns: [{
field: 'TableId',
title: 'Id',
width: 50
}, {
field: 'Area',
title: 'Area'
}, {
field: 'Table',
title: 'Table',
width: 60
}, {
command: 'destroy',
title: ' ',
width: 100
}]
}).data("kendoGrid");
}); // end edit

Okay, I got it:
These 2 lines make it happen:
var grid = $("#rt_tableGrid").data("kendoGrid");
grid.editRow($("#rt_tableGrid tr:eq(1)"));
Certainly only on my local script, in the Fiddle I cant´t get it to work.
Although in the Docu is written: Requires "inline" or "popup"
Documentation here

How to display a multi-line title in a Highslide pop-up while using Highcharts?

I'm using Highcharts to display a chart and I'm using Highslide to display additional information in a pop-up when the user clicks on a point in the chart. However, I want to add additional information to the title/heading-text in the pop-up.
I've gotten Highslide to work in displaying basic information using the following code:
$(function () {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
}
credits: {
enabled: false
}
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
this.y +' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: []
}
});
I've read through the API for Highslide and saw that you could use the 'heading' variable with the 'Expander.prototype.onAfterGetHeading' function, which I've displayed below, but I'm not sure how to implement it with Highcharts.
hs.Expander.prototype.onAfterGetHeading = function () {
this.heading.html = 'this.a.title';
}
HERE's a site that displays a pop-up with a multi-line title in a Highslide pop-up, as an example. However, keep in mind that I'm trying to implement this in Highcharts, possibly with dynamic text in the title.
Thanks.

Here’s a solution you can use with Highcharts: http://jsfiddle.net/roadrash/gd3xz/
Please note that this is the correct code to insert the anchor's title text in the heading, as an additional heading text:
hs.Expander.prototype.onAfterGetHeading = function (sender) {
if (sender.heading) {
sender.heading.innerHTML += this.a.title;
}
};
I’m not familiar with Highcharts, but I don’t think you can use this.a.title since a refers to the anchor tag. You can of course insert something else than this.a.title with the above code, as I've done in my demo.