PDA

View Full Version : tooltip for grid cell by clicking



johnsmith86
12 Jun 2012, 2:53 AM
Hi,
I'm working on a Grid to show data from my movie database.
In order to show the data clearer I need some help.
I want to show a tool tip or sth. when clicking on the row with plot.
This tool tip should be at a fix position, best aligned to the top left of that grid cell.
It shall display the whole plot data, because it shows only the first words in the grid.

I tried some examples from here and some I found via google.
Now I found something that at least shows the tooltip, but it shows it everywhere in the column and only when I click in one of the cells in the plot row first.

Please tell me how I can fix this.

Here is my code:



// create the Data Store
Ext.create('Ext.data.Store', {
storeId:'movieStore',
model: 'Movies',
//fields:['image', 'name', 'year', 'video', 'audio', 'length', 'plot', 'imdb', 'rating', 'seen'],
//fake data:
data: { "Movies" : [
{ "ID" : "0", "name" : "Avatar", "year" : 2009, "video" : 4, "audio" : 2, "image": "http://bilder.filmstarts.de/r_640_600/b_1_d6d6d6/medias/nmedia/18/64/43/65/19149062.jpg", "length" : 162, "plot" : "Bla Bla", "imdb" : 9.0, "Link" : "tt0499549", "rating" : 5, "seen" : 1 },
{ "ID" : "1", "name" : "Snow White and the Huntsman", "year" : 2012, "video" : 4, "audio" : 3, "image": "http://bilder.filmstarts.de/r_640_600/b_1_d6d6d6/medias/nmedia/18/64/43/65/19149062.jpg", "length" : 122, "plot" : "Snow White is the only person in the land fairer than the evil queen. Unable to tolerate the insult to her vanity, the evil queen decides that Snow White must die. The queen sends a huntsman to kill Snow White. However the huntsman finds himself unable to murder the innocent young woman, and instead ends up training her to become a warrior capable of threatening the queen's reign.", "imdb" : 7.3, "Link" : "tt0499549", "rating" : 0, "seen" : 0 }
] },
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'Movies'
}
}
});

var grid = Ext.create('Ext.grid.Panel', {
title: 'Movies',
store: Ext.data.StoreManager.lookup('movieStore'),
columns: [
{header: 'Image', width: 60, dataIndex: 'image', renderer: formatImage, sortable: false, menuDisabled: true, resizable: false},
{header: 'Name', width: 50, dataIndex: 'name', flex: 1},
{header: 'Year', width: 50, dataIndex: 'year'},
{header: 'Video', width: 50, dataIndex: 'video', renderer: formatVideo},
{header: 'Audio', width: 50, dataIndex: 'audio', renderer: formatAudio},
{header: 'Length', width: 60, dataIndex: 'length', renderer: formatLength},
{header: 'Plot', width: 100, dataIndex: 'plot'
, listeners: {
click: {
fn: function(view) {
view.tip = Ext.create('Ext.tip.ToolTip', {
// The overall target element.
target: view.el,
// Each grid row causes its own seperate show and hide.
delegate: view.itemSelector,
// Moving within the row should not hide the tip.
//trackMouse: true,
// Render immediately so that tip.body can be referenced prior to the first show.
//renderTo: 'MoviesGrid',
listeners: {
// Change content dynamically depending on which element triggered the show.
beforeshow: function updateTipBody(tip) {
tip.update(view.getRecord(tip.triggerElement).get('plot'));
}
}
});
}
}
}

},
{header: 'IMDB', width: 50, dataIndex: 'imdb'},
{header: 'Rating', width: 50, dataIndex: 'rating'},
{header: 'Seen', width: 50, xtype: 'checkcolumn', dataIndex: 'seen', menuDisabled: true}
],
height: 500,
width: 1000,
collapsible: true,
multiSelect: true,
renderTo: 'MoviesGrid'
});

johnsmith86
19 Jun 2012, 3:36 AM
push