PDA

View Full Version : Tooltip problems



forumuser1080
6 May 2011, 6:05 PM
I am trying to create a tooltip inside of a renderer of a column in a grid panel. I have two problems.

1. I want the tooltip to to have the following config properties (ie I do not want to tooltip to disappear)
autoHide: false,
closable: true

2. when I have a really long string of characters without a space the characters spill over the edge of the tooltip window. So I guess I need to set
width: 500
Also in the documentation the width max is 500, if I cannot control the length of a string of characters it might still spill over. Is there a way around this.

So my biggest problem is that I am creating the tooltip using the 'qtip' attr in a div element so I have no idea how to set its config properties. Is there a another way to create the tooltip and insert it into the div and still return the renderer to do the right thing?



Ext.ns('MyApp');

MyApp.Grid = Ext.extend(Ext.grid.GridPanel, {
initComponent:function() {

// hard coded - cannot be changed from outside
var config = {
// store
store: new Ext.data.JsonStore({
fields: ['id', 'data'],
data: [{
id: 1,
data: 'baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
}]
}),

// column model
columns:[{
dataIndex:'id',
header:'Id',
width:50
},{
dataIndex:'data',
header:'Some Data',
width:100,
renderer: this.customRender.createDelegate(this)
}],
qtipTpl: new Ext.XTemplate(
'<tpl for=".">',
'<div>{value}</div>',
'</tpl>')
};

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

// call parent
MyApp.Grid.superclass.initComponent.apply(this, arguments);

},
customRender:function(value, metaData, record) {
// create tooltip
var qtip = this.qtipTpl.apply({
value: value
});

// return markup
return '<div qtip="' + qtip +'">' + value.substring(0,5) + '...' + '</div>';
}
});