PDA

View Full Version : Put tooltip to bachground images



ravigupta84
8 Sep 2010, 2:31 AM
I want to add tooltip when a panel's/Window/Tab panel property set to

closable:true

How can we add alt attribute for background images.

Condor
8 Sep 2010, 2:40 AM
You can only add 'alt' attributes to elements that support it. This has nothing to do with the background image.

Where do you want to tip? On the close tool?

ravigupta84
8 Sep 2010, 2:58 AM
-------------------------------------------------------------------
CLWindow = Ext.extend(Ext.Window, {
layout: 'fit',
width: 700,
height: 250,
closable: true,
constrainHeader: true,
border: false,
draggable: true,
resizable: true,
monitorValid: true,
closeAction: 'close',
plain: true,
modal: true,


});

Ext.reg('cwindow', CLWindow);

In the above example closable:true whihc means a close button will be visible in the top right corner of the window.
I want when a user put the mouse over on it 'Close' should be appear as tooltip

Condor
8 Sep 2010, 3:07 AM
You could add a qtip to the close tool, e.g.

Ext.override(Ext.Panel, {
// Returns tool object with specified id
getTool: function(id) {
if (Ext.isArray(this.tools)) {
for (var i = 0; i < this.tools.length; i++) {
if (this.tools[i].id == id) {
return this.tools[i];
}
}
} else if (Ext.isObject(this.tools) {
return this.tools[id];
}
}
});
CLWindow = Ext.extend(Ext.Window, {
layout: 'fit',
width: 700,
height: 250,
closable: true,
constrainHeader: true,
border: false,
draggable: true,
resizable: true,
monitorValid: true,
closeAction: 'close',
plain: true,
modal: true,
initTools: function(){
CLWindow.superclass.initTools.call(this);
// Set qtip for the close tool that was just added
this.getTool('close').qtip = 'Close';
}
});

ravigupta84
8 Sep 2010, 3:09 AM
warn: function(extraParam) {
var baseParams = {
title: 'caption',
icon: Ext.MessageBox.WARNING,
cls:'cl-alert-warn',
buttons: Ext.Msg.OK
};
Ext.apply(baseParams, extraParam);
Ext.MessageBox.show(baseParams);
}

Same here if i want to put a tool tip on the warning image on the Warning Message Box

Condor
8 Sep 2010, 3:26 AM
MessageBox is one big class with private methods. It's really hard to do anything with it.

You would have to register a QuickTip for the private iconEl variable.

ravigupta84
8 Sep 2010, 3:57 AM
Please let me know how to register a QuickTip for the private iconEl variable. DO i need to override the MEssageBox class?

Condor
8 Sep 2010, 4:01 AM
You can't override it; it's private.

You can only completely replace the Ext.MessageBox class with a new one with modified code.

ravigupta84
8 Sep 2010, 4:39 AM
this.getTool('close').qtip = 'Close';

Error - this.getTool('close') is undefined.

My question - Why yOu have passed 'close' as an arguement to getTool(). It does not exist

Condor
8 Sep 2010, 4:45 AM
The close tool has id:'close'. Window.initTools is adding this tool, so getTool should be able to find it.

ravigupta84
8 Sep 2010, 5:23 AM
I inspected this element in firefox throgh firebug and found that there is no 'close' element.

<div class="x-tool x-tool-close " id="ext-gen579">&nbsp;</div>

I put a alert in the overirde getTool() defined above by you
it says alert(this.tools) is undefined.
Do the needful

ravigupta84
8 Sep 2010, 5:26 AM
Inspected this element in firefox throgh firebug and found that there is no 'close' element.
<div class="x-tool x-tool-close " id="ext-gen579">&nbsp;</div>
I put a alert in the overirde getTool() defined above by you
it says alert(this.tools) is undefined.

ravigupta84
8 Sep 2010, 5:27 AM
Inside getTool() method - > alert(this.tools) is undefined.

Condor
8 Sep 2010, 5:31 AM
And you are indeed calling getTool after initTools has been called (like I posted)?

ravigupta84
8 Sep 2010, 6:28 AM
I have corrected the code and able to get the close object id but not able to view the tooltip.

Here is my whole code:

EntityWindowPopup = Ext.extend(Ext.Window, {
closable:true,
constrainHeader:true,
border:false,
draggable : true,
resizable :true,
monitorValid:true,
closeAction:'close',
plain : true,
modal:true,
initComponent: function() {
EntityWindowPopup.superclass.initComponent.call(this);
},
initTools: function(){
EntityWindowPopup.superclass.initTools.call(this);
// Set qtip for the close tool that was just added
alert(this.getTool('close'));
this.getTool('close').qtip = 'Close';
}



});



Ext.reg('MassupdateEntityWindow', clent.icom.entity.EntityWindowPopup);


Ext.override(Ext.Window, {

// Returns tool object with specified id
getTool: function(id) {
if (Ext.isArray(this.tools)) {
for (var i = 0; i < this.tools.length; i++) {
if (this.tools[i].id == id) {
return this.tools[i];
}
}
} else if (Ext.isObject(this.tools)) {
return this.tools[id];
}
}
});

ravigupta84
9 Sep 2010, 4:41 AM
Please see the below link

ravigupta84
9 Sep 2010, 4:42 AM
Want to add tool tip on tab panel's close icon


I want to add tooltip when Tab panel property set to

closable:true

Here is my code
===========================

//Override the Panel gettool() method

Ext.override(Ext.Panel, {

// Returns tool object with specified id
getTool: function(id) {
if (Ext.isArray(this.tools)) {
for (var i = 0; i < this.tools.length; i++) {
if (this.tools[i].id == id) {
return this.tools[i];
}
}
} else if (Ext.isObject(this.tools)) {
return this.tools[id];
}
}


});

==============================================

//Create a tab Panel
TabPanel = Ext.extend(Ext.Panel, {

initComponent: function() {
TabPanel.superclass.initComponent.call(this);
},
initTools: function(){
TabPanel.superclass.initTools.call(this);
// Set qtip for the close tool that was just added
this.getTool('close').set({qtip:'Close'});
}

});

Ext.reg('TabPanel', TabPanel);

================
Instantiate TabPanel

var addNewTab = function(oUri, oParams, oTitle, oTabID) {
var oPanel = Ext.getCmp('maintab');
var tabItem;

var itemPresent = oPanel.items.length;

tabItem = new TabPanel({
id: 'tab_' + oTabID,
title: oTitle,
tabtip: oTitle,
iconCls: 'tabs',
layout: 'fit',
autoScroll: true,
closable: true
});


//Add tab to panel
if (oTabID === 'OrderDtlId') {
if(Ext.getCmp('tab_35011')){
// always add order details next to orders panel
oPanel.insert(oPanel.items.indexOf(Ext.getCmp('tab_35011'))+1,tabItem);
} else {
oPanel.add(tabItem);
}
}
else {
oPanel.add(tabItem);
}
oPanel.doLayout();
Ext.getCmp('tab_' + oTabID).show();
}
}
===================================

How to add tool tip for panel collapsable icon '>>' this icon

Condor
9 Sep 2010, 5:15 AM
Ext.Panel doesn't have a 'closable' config option, so it won't add a close tools (my example used an Ext.Window which does have a closable config option)!

Instead of closable:true you want:

tools: [{
id: 'close',
qtip: 'Close',
handler: function(){
// do something when clicked
}
}]

joeri
9 Sep 2010, 5:51 AM
Sort of a side-track, but alt is never to be used for tooltips:
http://www.456bereastreet.com/archive/200604/alt_text_is_an_alternative_not_a_tooltip/

ravigupta84
10 Sep 2010, 5:20 AM
Thanks for this, i have done with this, i have one more issue


var navPanel = new NavPanel({
id: 'mainIcomWest',
region: 'west',
closable: true,
collapsible: true,
split: true
});
=============================================

NavPanel = Ext.extend(Ext.form.FormPanel, {
layout: 'accordion',
width: '14%',
title: '<cl:message code="navigation" />',

initComponent: function() {

var orders = new Ext.Panel({
id: 'MyIcom'
title: 'Digite',
autoHeight: true,
border: false,
buttonAlign: 'right',
bodyStyle: 'padding-top:5px;',
cls: 'nav-links',
});
NavPanel.superclass.initComponent.apply(this, arguments);
},

afterrender:function(){
alert(this.getTool('toggle'));

NavPanel.superclass.afterRender.call(this);
Ext.QuickTips.register({
target: this.getEl('toggle'),
text: L10n.getL10nMessage('icon')
});


});
Ext.reg('NavPanel', NavPanel);

ravigupta84
13 Sep 2010, 5:15 AM
22363

I want to add a tootltip for this draggable icon. Here is my code.
If i do collapseMode:'mini' the above icon appeares on the screen. I need tooltip for this icon.
var entityActionBarPanel = new Ext.Panel({
layout: 'border',
region: 'north',
split: true,
collapsible: true,
collapseMode: 'mini',
border: false,

toggleTip: {
text: '<cl:message code="Collapse" />'
},
listeners: {
render: function(c){
c.toggleTip.target = c.tools['toggle'];
Ext.QuickTips.register(c.toggleTip);
},
expand: function(c){
c.toggleTip.text = '<cl:message code="Expand" />';
},
collapse: function(c){
c.toggleTip.text = '<cl:message code="Collapse" />';
}

}


});

Please do the needful

Condor
13 Sep 2010, 6:14 AM
toggleTip: {
text: 'Collapse'
},
listeners: {
render: {
fn: function(c){
var region = c.ownerCt.layout[c.region];
region.getCollapsedEl();
c.toggleTip.target = [c.tools['toggle'], region.miniSplitEl, region.miniCollapsedEl];
Ext.QuickTips.register(c.toggleTip);
},
delay: 1
},
expand: function(c){
c.toggleTip.text = 'Collapse';
},
collapse: function(c){
c.toggleTip.text = 'Expand';
}
}

ravigupta84
14 Sep 2010, 4:56 AM
Yes, It's working, Thanks a ton Condor

ravigupta84
15 Sep 2010, 4:47 AM
22415

Here is the Grid collapsable icon in the attached image. I need a tooltip for this.


OrderDenomDtlGridSummary = Ext.extend(Ext.grid.EditorGridPanel, {

initComponent: function() {



this.view = new Ext.grid.GroupingView({
forceFit:true,
monitorResize :true,
monitorWindowResize:true,
getRowClass : function (record,meta, index) {
if (record.data.denominationId < 0) {
return 'x-grid3-tr-orderTotal';
}
},
startGroup: myTpl
});

var detailRecord = Ext.data.Record.create([
{name:'currencyId'},
{name:'denominationId'},
{name:'fitness'}

]);
var denomStore = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({root: "rows"},detailRecord),
sortInfo:{field: 'fitness', direction: "ASC"},
groupField:'fitness'
});

this.store = denomStore;

}
}

=====================================

this.OrderDenomDtlGridSummary = new OrderDenomDtlGridSummary({
currencyCountry:this.currency,
serviceType:this.serviceType,
anchor:'100%',
collapsible: true,//
title: '<cl:message code="title" />',
toggleTip: {
text: '<cl:message code="Collapse" />'
},
listeners: {
render: function(c){
c.toggleTip.target = c.tools['toggle'];
Ext.QuickTips.register(c.toggleTip);
},
expand: function(c){
c.toggleTip.text = '<cl:message code="Collapse" />';
},
collapse: function(c){
c.toggleTip.text = '<cl:message code="Expand" />';
}

}
});
Please do the needful

Condor
15 Sep 2010, 6:01 AM
This is a tip for reapeating data.

I think a modified version of the DataTip plugin (see User extensions forum) would be better suited.

ravigupta84
16 Sep 2010, 4:05 AM
I have found the code for Grouping view - see the below code. I need a tooltip for the above images

Ext.grid.GroupingView = Ext
.extend(
Ext.grid.GridView,
{
groupByText :"Group By This Field",
showGroupsText :"Show in Groups",
hideGroupedColumn :false,
showGroupName :true,
startCollapsed :false,
enableGrouping :true,
enableGroupingMenu :true,
enableNoGroups :true,
emptyGroupText :"(None)",
ignoreAdd :false,
groupTextTpl :"{text}",
gidSeed :1000,
initTemplates : function() {
Ext.grid.GroupingView.superclass.initTemplates
.call(this);


this.endGroup = "</div></div>"
},
renderUI : function() {
Ext.grid.GroupingView.superclass.renderUI.call(this);
this.mainBody
.on("mousedown", this.interceptMouse, this);
if (this.enableGroupingMenu && this.hmenu) {
this.hmenu.add("-", {
itemId :"groupBy",
text :this.groupByText,
handler :this.onGroupByClick,
scope :this,
iconCls :"x-group-by-icon"
});
if (this.enableNoGroups) {
this.hmenu.add( {
itemId :"showGroups",
text :this.showGroupsText,
checked :true,
checkHandler :this.onShowGroupsClick,
scope :this
})
}
this.hmenu.on("beforeshow", this.beforeMenuShow,
this)
}
},
toggleGroup : function(c, b) {
this.grid.stopEditing(true);
c = Ext.getDom(c);
var a = Ext.fly(c);
b = b !== undefined ? b : a
.hasClass("x-grid-group-collapsed");
this.state[a.dom.id] = b;
a[b ? "removeClass" : "addClass"]
("x-grid-group-collapsed")
},
expandAllGroups : function() {
this.toggleAllGroups(true)
},
collapseAllGroups : function() {
this.toggleAllGroups(false)
},
getGroupId : function(g) {
var d = this.grid.getGridEl().id;
var c = this.getGroupField();
var e = this.cm.findColumnIndex(c);
var b = this.cm.config[e];
var h = b.groupRenderer || b.renderer;
var a = this.getGroup(g, {
data : {}
}, h, 0, e, this.ds);
return d + "-gp-" + c + "-"
+ Ext.util.Format.htmlEncode(g)
}
});

ravigupta84
24 Sep 2010, 1:11 AM
I have analyzed the code. I need a tooltip on GroupingView/Image

Here is the code:

OrderDenomDtlGridSummary = Ext.extend(Ext.grid.EditorGridPanel, {

initComponent: function() {

var myTpl = new Ext.XTemplate(
'<div id="{groupId}" class="x-grid-group {cls}">',
'<div id="{groupId}-hd" class="x-grid-group-hd" style="{style}"><div class="x-grid-group-title">',
'</div></div><div id="{groupId}-bd" class="x-grid-group-body">'

);

this.view = new Ext.grid.GroupingView({
forceFit:true,
monitorResize :true,
monitorWindowResize:true,
getRowClass : function (record,meta, index) {
if (record.data.denominationId < 0) {
return 'x-grid3-tr-orderTotal';
}
}

startGroup: myTpl


});
}

}


x-grid-group-title (+/- symbol) is a css in the ext-all.css file.
x-grid-group-hd - Header means toggle header

I need a tooltip on image and groupingView header
22545

cgi-bin
28 Jan 2011, 6:37 AM
toggleTip: {
text: 'Collapse'
},
listeners: {
render: {
fn: function(c){
var region = c.ownerCt.layout[c.region];
region.getCollapsedEl();
c.toggleTip.target = [c.tools['toggle'], region.miniSplitEl, region.miniCollapsedEl, region.expandToolEl];
Ext.QuickTips.register(c.toggleTip);
},
delay: 1
},
expand: function(c){
c.toggleTip.text = 'Collapse';
},
collapse: function(c){
c.toggleTip.text = 'Expand';
}
}
Hi, I just wanted to add 2 things:
1) If you are not using the "mini" collapse mode, add the green part to show the tooltip on the expand tool in the "normal" collapsed region.
2) I'm curious as to why you had to use the alternate listener definition render: {fn: function(c){..}, delay:1} instead of the standard render: function(c) {..}? I tried using the various event listeners (render, afterrender, afterlayout) without using a delay, and they all error. I am worried this is simply creating a race condition, and for slow browsers it may still error? Should the code be tied to a different object's event? Also curiously, the afterlayout for the panel seems to fire twice? Buy putting in some debug alerts to trace the event stack I get: viewport.render, west.render, west.afterrender, west.afterlayout, viewport.afterlayout, west.afterlayout(again???), viewport.afterrender... even putting the code into the viewport's afterrender listener, I still get an error: "tip is undefined" (ext-all-debug 33037)

Anyway, just wanted to thank you for the code to get those tool tips working, and also helped me get the collapsed panel opening on mouseover... all my efforts wer failing because of the timing issues of not having that "delay: 1".

cgi-bin
28 Jan 2011, 6:43 AM
even putting the code into the viewport's afterrender listener, I still get an error: "tip is undefined" (ext-all-debug 33037)
ugh, about a minute after posting that I realized why... Quictips was not init'ed yet... moved quicktips init before the viewport creation in my onReady() fn, and it works in either the viewport.afterrender or west.afterlayout!

cgi-bin
28 Jan 2011, 7:05 AM
Well, using afterlayout on the panel was firing every time the panel was displayed... guess thats why it fired twice in my initial tests...
changed the listener to: afterlayout: { fn: function(c, l){...}, single: true }, and all seems right with the world. :)

If anyone is curious here is the code for the mouse-over too... (I use a treepanel that opens tabs in my center regions, so also have a click listener to hide the slid-out panel on click)
var myWest = new Ext.tree.TreePanel
({
<various configs>,
region: 'west',
header: true,
title: 'Navigation',
collapsible: true,
toggleTip:
{
text: 'Collapse'
},
listeners:
{
afterlayout:
{
fn: function(c, l)
{
var region = c.ownerCt.layout[c.region];

// have to call this so that the dom elements are created
var ce = region.getCollapsedEl();

// enable the Collapse/Expand tool tips
c.toggleTip.target =
[
c.tools['toggle'],
region.expandToolEl,
region.miniSplitEl,
region.miniCollapsedEl
];
Ext.QuickTips.register(c.toggleTip);

// enable the slide-out on hover over collapsed area
ce.on
(
'mouseenter',
function(e, t)
{
if (c.collapsed)
{
region.slideOut();
}
}
);
},
single: true
},
expand: function(p)
{
p.toggleTip.text = 'Collapse';
},
collapse: function(p)
{
p.toggleTip.text = 'Expand';
},
click: function(node, e)
{
if(node.isLeaf())
{
e.stopEvent();

//<custom code to create tab>

if (this.collapsed)
{
this.ownerCt.layout[this.region].slideIn();
}

return false;
}
},
}
});