Here is the Label object
,
label: {
rotate: {
degrees: 90
},
renderer: function(v){
var toolTip = Ext.create('Ext.tip.ToolTip', {
target: this,
html: v,
anchor: 'left',
dismissDelay: 0,
showDelay: 0,
autoHide: false
});
toolTip.on('show', function(){
var timeout;
toolTip.getEl().on('mouseout', function(){
timeout = window.setTimeout(function(){
toolTip.hide();
}, 500);
});
toolTip.getEl().on('mouseover', function(){
window.clearTimeout(timeout);
});
Ext.get(targetId).on('mouseout', function(){
timeout = window.setTimeout(function(){
toolTip.hide();
}, 500);
});
});
if(v.length>10)
return Ext.util.Format.substr(v,0,10) +'...' ;
}
}
This code is not not creating the tool tip. No error occurs. Is there any other method to create the category label tool tip.
Thanks,
Anish
Related
In my extjs6 project I have this long running method. Starting with a loaded store, it groups by 'instrument', then creates an array with each item of that 'instrument', then creates a new store with only that data, then creates a series for a extjs chart, and adds the series to the chart.
there is a ton of data with about 100 instruments and a daily number for 2-3 years of data for each instrument. the process takes a long time and I want to update the mask window to say which instrument is being updated so the user can see what is going on.
How can I update the mask message in the middle of this long running method?
var me = this;
var myMask = Ext.get(me.windowCumulative.getEl()).mask('hello');
var task = new Ext.util.DelayedTask(function () {
//fadeout section
myMask.fadeOut({
duration: 500,
remove: true
});
//convert sql date to date datatype
myStoreTab1.each(function (record) {
record.set('filedate', new Date(record.get('filedate')));
});
myStoreTab1.sort('filedate');
myStoreTab1.group('instrument');
myStoreTab1.getGroups().each(function (group, i) {
var groupName = group._groupKey;
var targetStore = Ext.create('Ext.data.Store', {
model: 'xxx.model.HistoricalInstrumentProfitModel'
});
var records = [];
group.each(function (record) {
records.push(record.copy());
});
targetStore.add(records);
var series = {
type: 'line',
axis: 'left',
xField: 'filedate',
yField: 'cumulativePl',
store: targetStore,
title: groupName,
tooltip: {
trackMouse: true,
renderer: 'onSeriesTooltipRender'
}
};
me.chartTab1.addSeries(series);
//me.chartTab1.redraw();
//me.windowCumulative.setLoading(false);
console.log('added series: ' + groupName);
});
});
task.delay(500);
//debugger;
//me.chartTab1.redraw();
UPDATE...
for every group I run this
function DoMask(step, panel, countGroups, group, chart) {
setTimeout(function () {
var groupName = group._groupKey;
var targetStore = Ext.create('Ext.data.Store', {
model: 'xxx.model.HistoricalInstrumentProfitModel'
});
var records = [];
group.each(function (record) {
records.push(record.copy());
});
targetStore.suspendEvents();
targetStore.add(records);
var series = {
type: 'line',
axis: 'left',
xField: 'filedate',
yField: 'cumulativePl',
store: targetStore,
title: groupName,
tooltip: {
trackMouse: true,
renderer: 'onSeriesTooltipRender'
}
};
chart.addSeries(series);
console.log('added series: ' + groupName);
console.log(count);
panel.mask('step : ' + count);
if (count == countGroups) {
chart.resumeEvents();
chart.resumeLayouts();
chart.resumeChartLayout();
chart.redraw();
panel.unmask();
}
count = count + 1;
}, 500);
}
Take a look at these two ways to present the progress to the user:
Here is the FIDDLE
Ext.application({
name: 'Fiddle',
launch: function () {
var count;
var p = Ext.create('Ext.ProgressBar', {
width: 300,
textTpl: 'my Progress {value*100}%'
});
var window = Ext.create('Ext.window.Window', {
title: 'Progress',
modal:true,
hidden:true,
closable:false,
items:[
p
]
});
var panel = Ext.create('Ext.panel.Panel', {
title: 'teste',
height: 400,
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'START LONG PROCESS MASK',
handler: function () {
count = 0;
this.up('panel').mask('Start');
DoMask(count);
}
}, {
xtype: 'button',
text: 'START LONG PROGRESS BAR',
handler: function () {
count = 0;
window.show();
DoProgress(count);
}
}]
});
function DoMask(step) {
setTimeout(function () {
panel.mask('step : ' + step);
count++;
if (count <= 10) {
DoMask(count);
} else {
panel.unmask();
}
}, 500);
}
function DoProgress(step) {
setTimeout(function () {
p.setValue(step/10);
count++;
if (count <= 10) {
DoProgress(count);
} else {
window.hide();
}
}, 500);
}
}
});
I'm try to use tooltip in a element inside a iframe(generated by htmleditor component).
This is i'm trying:
Ext.tip.QuickTipManager.init();
Ext.create('Ext.form.HtmlEditor', {
width: 750,
height: 250,
renderTo: Ext.getBody(),
listeners: {
afterrender: function () {
this.getToolbar().add([{
xtype: "combobox",
flex: 1,
displayField: "name",
valueField: "value",
store: {
data: [{
name: "#NAME# (User's name)",
value: "#NAME#"
}]
}
}, {
xtype: "button",
text: "Add",
handler: function () {
var value = this.prev().getValue();
var htmlEditor = this.up("htmleditor");
if (value) {
var id = Ext.id();
value = "<span id=\"" + id + "\" style=\"cursor:pointer;\">" + value + "</span>";
htmlEditor.insertAtCursor(value);
var doc = htmlEditor.getDoc();
var elSpan = doc.getElementById(id);
var tTip = Ext.create("Ext.tip.ToolTip", {
html: "User's name tooltip.",
shadow: false,
scope: doc
});
elSpan.addEventListener("mouseover", function () {
tTip.showAt(elSpan.offsetLeft, elSpan.offsetTop)
});
elSpan.addEventListener("mouseleave", function () {
tTip.hide();
});
}
}
}])
}
}
});
But, when the component is shown, it appear in wrong position. See on the fiddle.
Sencha Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1vj4
I found a solution!
elSpan.addEventListener("mouseover", function (e) {
var x = e.pageX;
var y = e.pageY;
var region = htmlEditor.getRegion();
x += region.x;
y += region.y;
tTip.showAt([x, y]);
});
I am working on Angular/ionic Cordova project. I am using google.visualization.LineChart to display the chart in my project. First time when we come on the page where I have draw the chart, It is working properly. But when I further navigate to next ion-view and came back to the screen where I have drawn the chart, chart does not appear. Any idea why it is happening? here is my code:
$scope.$on('$ionicView.enter', function() {
$ionicLoading.show({
template: '<ion-spinner icon="spiral"></ion-spinner>',
noBackdrop:false
});
serverRepo.salesMonthly().then(function(objS){
$scope.monthlyData=objS.data;
if(objS.data.orders == null){
$ionicLoading.hide();
alert('There is not data regarding Monthly Sale');
}else{
angular.forEach(objS.data.orders, function(value, key) {
objS.data.orders[key].CreatedOn=new Date(objS.data.orders[key].CreatedOn);
if(key == objS.data.orders.length-1){
$scope.data = objS.data;
drawChart();
console.log('drawChart Called');
}
})
$ionicLoading.hide();
}
},function(objE){
console.log("Error:-\n"+JSON.stringify(objE));
$ionicLoading.hide();
});
});
function drawChart(){
var options = {
legend: { position: 'bottom' },
curveType: 'function',
titlePosition: 'in',
axisTitlesPosition: 'in',
hAxis: {
textPosition: 'in',
minValue: 0,
textStyle:{color: "#fff"}
},
vAxis: {
minValue: 0,
maxValue: 13,
textPosition: 'in',
textStyle:{color: "#fff"},
minorGridlines:{color: "#ccc"}
},
lineWidth: 6,
fontSize:11,
chartArea:{left:0,top:0,width: '100%', height: '100%',backgroundColor: '#43396D'},
colors: ['#32BD76'],
animation:{
duration: 1500,
easing: 'out',
startup: true
}
};
google.charts.setOnLoadCallback( function () {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'labels');
data.addColumn('number', 'data');
for(i = 0; i < $scope.data.labels.length; i++)
data.addRow([$scope.data.labels[i], $scope.data.datasets.data[i]]);
// Create and draw the visualization.
$scope.myChart=new google.visualization.LineChart(document.getElementById('curve_chartmonthly'));
$scope.myChart.draw(data, options);
console.log('chart drawn.......');
});
}
think the problem has to do with google.charts.setOnLoadCallback
which is called once per page load
try moving the code inside the callback to drawChart
then call drawChart from the callback
see following example...
$scope.$on('$ionicView.enter', function() {
$ionicLoading.show({
template: '<ion-spinner icon="spiral"></ion-spinner>',
noBackdrop:false
});
serverRepo.salesMonthly().then(function(objS){
$scope.monthlyData=objS.data;
if(objS.data.orders == null){
$ionicLoading.hide();
alert('There is not data regarding Monthly Sale');
}else{
angular.forEach(objS.data.orders, function(value, key) {
objS.data.orders[key].CreatedOn=new Date(objS.data.orders[key].CreatedOn);
if(key == objS.data.orders.length-1){
$scope.data = objS.data;
drawChart();
console.log('drawChart Called');
}
})
$ionicLoading.hide();
}
},function(objE){
console.log("Error:-\n"+JSON.stringify(objE));
$ionicLoading.hide();
});
});
function drawChart(){
var options = {
legend: { position: 'bottom' },
curveType: 'function',
titlePosition: 'in',
axisTitlesPosition: 'in',
hAxis: {
textPosition: 'in',
minValue: 0,
textStyle:{color: "#fff"}
},
vAxis: {
minValue: 0,
maxValue: 13,
textPosition: 'in',
textStyle:{color: "#fff"},
minorGridlines:{color: "#ccc"}
},
lineWidth: 6,
fontSize:11,
chartArea:{left:0,top:0,width: '100%', height: '100%',backgroundColor: '#43396D'},
colors: ['#32BD76'],
animation:{
duration: 1500,
easing: 'out',
startup: true
}
};
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'labels');
data.addColumn('number', 'data');
for(i = 0; i < $scope.data.labels.length; i++)
data.addRow([$scope.data.labels[i], $scope.data.datasets.data[i]]);
// Create and draw the visualization.
$scope.myChart=new google.visualization.LineChart(document.getElementById('curve_chartmonthly'));
$scope.myChart.draw(data, options);
console.log('chart drawn.......');
}
google.charts.setOnLoadCallback(drawChart);
I have the same problem. I resolve change the ID reference for a class.
Ex:
to
After, identify the element with jquery:
from document.getElementById('your_chart_id') to $('.your_chart_id')[0]
I am using
var modalWindow = new Ext.Window({
title: "Window",
items: [
{html: "<div id='example'>Hello</div> "}
]
});
modalWindow.show();
to open a modal window. I need fadein/fadeout features on this window.
Please help..
This should do it:
var modalWindow = new Ext.Window({
title: "Window",
width: 400,
height: 300,
html: "<div id='example'>Hello</div> ",
listeners : {
show : function(window) {
window.getEl().setOpacity(0);
window.getEl().fadeIn({duration: 2000});
},
beforeclose : function(window) {
if(!window.shouldClose) {
window.getEl().fadeOut({duration: 2000, callback: function() {
window.shouldClose = true;
window.close();
}});
}
return window.shouldClose ? true : false;
}
}
});
modalWindow.show();
Hello I have a window with tools. I have the tool: 'help', and when clicking on it I want it to output a tooltip with text from my HTML file, but actually it shows alert('Help'), and it doesn't output from the file:
tools: [
{
type: 'refresh',
name: 'refresh',
tooltip: 'reload'
},
{
type: 'help',
handler: function (event, toolEl, panel) {
alert('Help');
var tooltips = [{
target: 'tip1',
html: 'A very simple tooltip'
}, {
target: 'ajax-tip',
width: 200,
autoLoad: {url: '/help/note/help.html'},
dismissDelay: 15000 // auto hide after 15 seconds
},
];
Ext.each(tooltips, function (config) {
Ext.create('Ext.tip.ToolTip', config);
});
},
}
]
This picture shows what I actually want:
You need to load the html file in an Ajay request from server and then create the tooltip in the success callback.
Ext.Ajax.request({
url: '/help/note/help.html',
success: function(response){
// in the success callback you get the html text in the response.responseText
// and then you can create a tooltip with the content of it
}
});
So you can do the following in the callback
var html = response.responseText;
var tooltip = {
target: 'ajax-tip',
width: 200,
html: html,
dismissDelay: 15000 // auto hide after 15 seconds
};
The full code should be
{
type: 'help',
handler: function (event, toolEl, panel) {
Ext.Ajax.request({
url: '/help/note/help.html',
success: function (response) {
var html = response.responseText;
var tooltip = {
target: 'ajax-tip',
width: 200,
html: html,
dismissDelay: 15000 // auto hide after 15 seconds
};
Ext.create('Ext.tip.ToolTip', tooltip);
}
});
}
}