View Full Version : Grid Details Popup

3 Jun 2011, 5:09 AM

I am hoping someone can help me. I have been working on grid that displays data and the client wants to hover a column and have a pop up show information from other table based on the value of the record the user is hovering over. So I have the grid displaying the data and for the field that I want to hover over I call the function below within the ColumnModel.

function taskrender(value, metaData, record, rowIndex, colIndex, store) {
var projectIdt = record.get('projectId');
var recordIndex = dstasks.find('projectId', projectIdt);
var lnamet = recordIndex;
if (recordIndex != -1) {
var dstasksRecord = dstasks.getAt(recordIndex);
lnamet = dstasksRecord.get('lName');
} else { lnamet = 'Edit' }
return '<a class="dark" href="../../defineTasks.asp?projectId=' + projectIdt + '" target="_blank">' + lnamet + '</a>';

I made a similar function for the pop up, but I couldn't figure out how to use the function below with data.

function trender(value) {
return "<span ext:qtip='Hello, I am a test popup'>Edit</span>";

What I am trying to do, is combine the two fucntions into one render so that i can render the column field to show the link in the grid and to have a pop up show detail data from another store.

I tried rewriting the return of taskrender to include the <span ext:qtip=... but i couldn't figure out the correct mix of " '.

Any help/guidance is greatly appreciated.


3 Jun 2011, 6:26 AM
Here's a functional example of a grid column renderer which uses the project ID of the parent store to find a match in the child store, then displays details taken from the child store via a qtip.

When the user floats their mouse over the Project Description column, they should get project details via a quicktip.

Hopefully this will point you in the right direction and I leave it to you to incorporate the anchor tags/links.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-blue.css" id="theme" />
<link rel="stylesheet" type="text/css" href="css/layout.css" />

<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';


Ext.apply(Ext.QuickTips.getQuickTip(), {
dimissDelay: 0, // disable auto-dismiss.
trackMouse: false

var storeChild = new Ext.data.ArrayStore({
xtype: 'arraystore',
fields: [{name: 'projectId', type: 'int'}, {name: 'details'}],
data: [
[1234, 'Molecular beam epitaxy takes place in high vacuum or ultra high vacuum (10-8 Pa). The most important aspect of MBE is the slow deposition rate (typically less than 1000 nm per hour), which allows the films to grow epitaxially. The slow deposition rates require proportionally better vacuum to achieve the same impurity levels as other deposition techniques.'],
[884, 'Generation of gravitons in the hot uniform and isotropic universe, S. S. Gershtein, A. A. Logunov and M. A. Mestvirishvili'],
[7, 'The cortical circuitry involved in conscious cognitive processes and the subcortical circuitry involved in fear responses have been extensively studied with neuroimaging, but their interactions remain largely unexplored.']

var storeParent = new Ext.data.ArrayStore({
xtype: 'arraystore',
fields: [{name: 'projectId', type: 'int'}, {name: 'projectDesc'}],
data: [
[1234,'Molecular Beam Epitaxy'],
[884, 'Graviton Generation'],
[7, 'Neocortical Modulation of the Amygdala']

//floating quick tip for project details display
function renderQuickTip(value, meta, record){
var projectId = record.get('projectId');

var matchingIndex = storeChild.find('projectId', projectId);
var resultString = "*** NO MATCHING PROJECT FOUND IN CHILD STORE ***";

if (matchingIndex > -1) {
var childRecord = storeChild.getAt(matchingIndex);
resultString = childRecord.get('details');

meta.attr = 'ext:qtip="' + resultString + '"';

return value;

var grid = new Ext.grid.GridPanel({
columns: [
{header: 'Project ID', dataIndex: 'projectId', sortable: true, width: 80},
{header: 'Project Description', dataIndex: 'projectDesc', width: 600, renderer: renderQuickTip}
columnLines: true,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
store: storeParent,
stripeRows: true

var viewport = new Ext.Viewport({
layout: 'fit',
items: [grid]

6 Jun 2011, 5:57 AM
Awesome, thanks a lot. This is exactly what I am looking to do. Can you help me tweak it thou.

In the grid, the quicktip shows a value for the first row only, all other rows it returns '*** NO MATCHING PROJECT FOUND IN CHILD STORE ***'. How can I have the quicktip pull the information for each row, not just the first row.

Also, is there a way to have it loop though the record to find more than one detail record for the parent? Some records have multiple child records.

Thanks for help, I really appreciate it.