PDA

View Full Version : QuickTip -- to a Panel or nonrendered divs



itcae
2 Sep 2010, 11:59 AM
Hello,

I got two issues running QuickTips, it would be nice, if you can give me some hints.

1)
The first one is related to the rendering of tab panels. If the Ext.Panel is not rendered so far, the div ids are not present and the QuickTips are not added to the divs ...
Do I need to call Ext.QuickTips.register(...) on every layout event? (How can I do this?) or is there a better solution?

2)
The second on is, the QuickTips can be registered for any input field, but not to a Ext.Panel, even if the ids are rendered ... obviously, adding a title to exactly this div works.


-------------------------------------------


this.QuickTips = function () {
Ext.QuickTips.init();
quicktip='extjs__quicktip';
Ext.Ajax.request({
url:'/js/json/tables.php?store=' + quicktip,
success: function (obj) {
Ext.QuickTips.register(Ext.util.JSON.decode(obj.responseText)[quicktip])
p('quicktips activated');
},
failure: function (obj) {
p('error in getting the quicktips');
}
});
}
Thank you, greetings
Alexander

Condor
3 Sep 2010, 1:17 AM
1. Register the quicktip in the render event of the component.
2. QuickTips only work for top-level elements (so not when they are obscured by other elements), so you can add a tip to the panel title, but not to the panel header, because the title is over it.

itcae
6 Sep 2010, 4:27 AM
Thank you, for your reply:
1. This one did not work on the first render call, but on the second -- which is strange.
I used to get the configuration via an ajax call and storing this to an object, to prevent ajax calls.
BUT if I do an ajax call for every render, it works on the first call, the cached solution works on the second call...

another thing is, I observed any render event, of every tab, is there a chance to observe a render call "on all subchildren"?

2. Is there a chance to bubble the events?



this.QuickTips = function () {

this.qtO = {};

this.__construct = function() {
Ext.QuickTips.init();
var quicktip = 'extjs__quicktip';
var that = this;
Ext.Ajax.request({
url:'/js/json/tables.php?store=' + quicktip,
success: function (obj) {
that.qtO = Ext.util.JSON.decode(obj.responseText)[quicktip];
that.reload();
p('quicktips activated');
},
failure: function (obj) {
p('error in getting the quicktips');
}
});
};
this.__construct();

this.loadTabPanels = function(tab_panelE) {
var that = this;
Ext.iterate(tab_panelE,
function (object, fn, scope) {
fn.on('render', function() {
p('rendering for object '+ object);
//that.reload(); // works for the second render call
that.__construct(); // works for every render call, but need an ajax call on each -- strange
});
});
};

this.reload = function() {
this.qtO['aex'] = Math.random();
p(this.qtO);
Ext.QuickTips.register(this.qtO);
};

};

Condor
6 Sep 2010, 4:36 AM
Are the QuickTips for items inside containers? In that case you should be using the afterlayout event instead of the render event of the container, e.g.

fn.on('afterlayout', function() {
// do stuff
}, null, {single: true});
(the single:true is required because afterlayout also fires on resize)

2. I've tried, but it makes the browser extremely slow.

itcae
6 Sep 2010, 6:21 AM
Thank you, in both cases, the firebug output is exactly the same.

The reload function is ALWAYS called, and it is called with exactly the same configuration object.



this.reload = function() {
this.qtO['aex'] = Math.random(); // slightly modify the object to prevent object caching, if any
p(this.qtO); // print out the cached Quicktips object
Ext.QuickTips.register(this.qtO); // register
};
calling __construct(), which makes the additional ajax call, always works on the first call ... but reload does not.
Obviously the firebug output of the object is exactly the same ...

In both cases, the call to QuickTips.register(...) is done using the same object, but the result is another.

Summary:

calling __construct() on event render -> quicktips are shown
calling reload() on event render -> no quicktips are shown

In both cases, the
p(this.qtO); says, that there is exactly the same object, which is fed into


Ext.QuickTips.register(this.qtO);


Greetings,
Alexander

itcae
6 Sep 2010, 7:17 AM
calling the reload after a small delay turns the lights on.



fn.on('render', function() {
p('rendering for object (event: render) '+ object);
p('quicktips.reload() after 5s');
window.setTimeout("quicktips.reload()", 100); // works for the first call
//that.reload_delay(); // works for the second render call
//that.__construct(); // works for every render call, but need an ajax call on each -- strange
});