PDA

View Full Version : Tool Tip not working on group column in group summery grid using extjs 4.1



yogesh.dabhi91
14 Jun 2012, 5:13 AM
I tried to put tooltip on group column, but it is not working.

Please check bellow code. Tooltip working for Task column which is not a grid group column but it is not working for project which is grid group column.


Ext.require([ 'Ext.grid.*',
'Ext.data.*',
'Ext.form.field.Number',
'Ext.form.field.Date',
'Ext.tip.QuickTipManager'
]);


Ext.define('Task', {
extend: 'Ext.data.Model',
idProperty: 'taskId',
fields: [
{name: 'projectId', type: 'int'},
{name: 'project', type: 'string'},
{name: 'taskId', type: 'int'},
{name: 'description', type: 'string'},
{name: 'estimate', type: 'float'},
{name: 'rate', type: 'float'},
{name: 'due', type: 'date', dateFormat:'m/d/Y'}
]
});


var data = [
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', estimate: 6, rate: 150, due:'06/24/2007'},
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'},
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 114, description: 'Add support for multiple types of anchors', estimate: 4, rate: 150, due:'06/27/2007'},
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due:'06/29/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 101, description: 'Add required rendering "hooks" to GridView', estimate: 6, rate: 100, due:'07/01/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 102, description: 'Extend GridView and override rendering functions', estimate: 6, rate: 100, due:'07/03/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due:'07/04/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due:'07/05/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 104, description: 'Testing and debugging', estimate: 6, rate: 100, due:'07/06/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 105, description: 'Ext Grid plugin integration', estimate: 4, rate: 125, due:'07/01/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 106, description: 'Summary creation during rendering phase', estimate: 4, rate: 125, due:'07/02/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 107, description: 'Dynamic summary updates in editor grids', estimate: 6, rate: 125, due:'07/05/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due:'07/05/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 109, description: 'Summary renderers and calculators', estimate: 4, rate: 125, due:'07/06/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due:'07/11/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due:'07/15/2007'}
];


Ext.onReady(function(){

Ext.tip.QuickTipManager.init();

var store = Ext.create('Ext.data.Store', {
model: 'Task',
data: data,
sorters: {property: 'due', direction: 'ASC'},
groupField: 'project'
});


var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
var showSummary = true;
var grid = Ext.create('Ext.grid.Panel', {
width: 800,
height: 450,
frame: true,
title: 'Sponsored Projects',
iconCls: 'icon-grid',
renderTo: document.body,
store: store,
plugins: [cellEditing],
selModel: {
selType: 'cellmodel'
},
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
tooltip: 'Toggle the visibility of the summary row',
text: 'Toggle Summary',
handler: function(){
showSummary = !showSummary;
var view = grid.lockedGrid.getView();
view.getFeature('group').toggleSummaryRow(showSummary);
view.refresh();
view = grid.normalGrid.getView();
view.getFeature('group').toggleSummaryRow(showSummary);
view.refresh();
}
}]
}],
features: [{
id: 'group',
ftype: 'groupingsummary',
groupHeaderTpl: '{name}',
hideGroupedHeader: true,
enableGroupingMenu: false
}],
columns: [{
text: 'Task',
width: 300,
locked: true,
tdCls: 'task',
sortable: true,
dataIndex: 'description',
hideable: false,
summaryType: 'count',
summaryRenderer: function(value, summaryData, dataIndex) {
return ((value === 0 || value > 1) ? '(' + value + ' Tasks)' : '(1 Task)');
},
renderer:function(value,metaData,record,colIndex,store,view) {
metaData.tdAttr = 'data-qtip="' + record.get("description") + '"';
return value;
}
}, {
header: 'Project',
width: 180,
sortable: true,
dataIndex: 'project',
renderer:function(value,metaData,record,colIndex,store,view) {
metaData.tdAttr = 'data-qtip="' + record.get("project") + '"';
return value;
}
}, {
header: 'Due Date',
width: 130,
sortable: true,
dataIndex: 'due',
summaryType: 'max',
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
summaryRenderer: Ext.util.Format.dateRenderer('m/d/Y'),
field: {
xtype: 'datefield'
}
}, {
header: 'Estimate',
width: 130,
sortable: true,
dataIndex: 'estimate',
summaryType: 'sum',
renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
return value + ' hours';
},
summaryRenderer: function(value, summaryData, dataIndex) {
return value + ' hours';
},
field: {
xtype: 'numberfield'
}
}, {
header: 'Rate',
width: 130,
sortable: true,
renderer: Ext.util.Format.usMoney,
summaryRenderer: Ext.util.Format.usMoney,
dataIndex: 'rate',
summaryType: 'average',
field: {
xtype: 'numberfield'
}
}, {
header: 'Cost',
width: 130,
sortable: false,
groupable: false,
renderer: function(value, metaData, record, rowIdx, colIdx, store, view) {
return Ext.util.Format.usMoney(record.get('estimate') * record.get('rate'));
},
summaryType: function(records){
var i = 0,
length = records.length,
total = 0,
record;


for (; i < length; ++i) {
record = records[i];
total += record.get('estimate') * record.get('rate');
}
return total;
},
summaryRenderer: Ext.util.Format.usMoney
}]
});
});




Please help me.

Thanks & Regards
Yogesh