PDA

View Full Version : How to put tooltip for grid cell editor?



renganathan
21 Apr 2014, 2:03 AM
Hi All, I want to integrate the tooltip with Grid cell editor. I was going through various example but none of the stuff was working. http://jsfiddle.net/jardalu/7kpZ9/ Please help me to integrate tooltip with grid cell editor

scottmartin
21 Apr 2014, 4:30 AM
You want the tooltip to be for the editor itself?

You could create an editor for each field type and do something like this:



Ext.onReady(function(){

var store = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
{ 'name': 'Lisa', "email":"[email protected]", "change":100 },
{ 'name': 'Bart', "email":"[email protected]", "change":-20 },
{ 'name': 'Homer', "email":"[email protected]", "change":23 },
{ 'name': 'Marge', "email":"[email protected]", "change":-11 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var editor = {
xtype: 'textfield',
allowBlank: false,
listeners : {
afterrender: function(field){
var tip = Ext.create('Ext.tip.ToolTip', {
target: field.el,
html: 'Edit this field'
});
}
}
};

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 1
});


Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [
{ header: 'Name', dataIndex: 'name', editor: editor },
{ header: 'Email', dataIndex: 'email', flex: 1, editor: editor },
{ header: 'Change', dataIndex: 'change', editor: editor }
],
height: 200,
width: 400,
renderTo: Ext.getBody(),

plugins: [cellEditing]
});

});

renganathan
24 Apr 2014, 4:34 AM
Thanks Scott