PDA

View Full Version : How to show tooltip with ajax loaded panel when mouse over grid cell



maneljn
7 Apr 2014, 2:46 AM
Is it possible to show a dynamically ajax post loaded panel like a tooltip when user puts mouse over some grid cell ? or on click on the grid cell ?

Manel

Farish
7 Apr 2014, 4:57 AM
you can take a look at the following example on how to add components to tooltip:

http://docs.sencha.com/extjs/4.2.2/#!/example/charts/TipsChart.html

may be you can try it for grid.

Farish
7 Apr 2014, 5:16 AM
here is an example:


var pieModel = [{
name: 'data1',
data: 10
}, {
name: 'data2',
data: 10
}, {
name: 'data3',
data: 10
}, {
name: 'data4',
data: 10
}, {
name: 'data5',
data: 10
}];

var pieStore = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: pieModel
});

var pieChart = Ext.create('Ext.chart.Chart', {
width: 100,
height: 100,
animate: false,
store: pieStore,
shadow: false,
insetPadding: 0,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data',
showInLegend: false,
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '9px Arial'
}
}]
});

var store = Ext.create('Ext.data.ArrayStore', {
fields: ['company', 'price', 'change'],
data: [
['3m Co', 71.72, 0.02],
['Alcoa Inc', 29.01, 0.42],
['Altria Group Inc', 83.81, 0.28],
['American Express Company', 52.55, 0.01],
['American International Group, Inc.', 64.13, 0.31],
['AT&T Inc.', 31.61, -0.48]
]
});

var grid = Ext.create('Ext.grid.Panel', {
title: 'Array Grid',
store: store,
columns: [
{text: 'Company', flex: 1, dataIndex: 'company'},
{text: 'Price', width: 75, dataIndex: 'price'},
{text: 'Change', width: 75, dataIndex: 'change'}
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});

var view = grid.getView();
var tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: view.itemSelector,
trackMouse: true,
renderTo: Ext.getBody(),
layout: 'fit',
items: [pieChart]
});