Calling attention to a tab / content panel

[gnosis]

I'm using the following function to draw attention to a content panel (if, for example, the user tries to open a "window" that's already open). It works nicely.

I'd be happy to hear feedback if anyone knows of a better way. I'm also interested in expanding it to a) include the title tab in the flashy goodness; and/or b) flashing the tab without stealing focus from the currently active tab.

/**
* Check for an id in the center region and flash it using Fx.highlight().
* @param {object} config The config object, which will look for:
* {string} id The id of the panel to flash
* {int} times Number of times to flash
* {string} color Hex color to flash
*/
flashTab: function(config){
var tabs = mainLayout.getRegion('center').getTabs();
if(tabs.getTab(config.id))
{
tabs.activate(config.id);
var target = Ext.fly(config.id);
for(i=0;i<config.times;i++){
target.highlight(config.color, { duration:.2 });
}
}
}
PS - what's the proper way to document the config possibilities that get crammed into the param?

[jack.slocum]

There's no official way. I usually just pop in a UL with LIs and bold the name of the config option.

[gnosis]

I played with this a bit more to see if I could include the tab. I couldn't get the tab itself to do anything useful, but I did find a way to flash the title of the tab, which is almost as good.

/**
* Call attention to a content panel "tab" in the center region
* @param {object} config The config object
* config options:
* {string} id - The id of the contentPanel to flash
* {bool} activate - Switch to the content panel
* {int} times - Number of times to flash
* {string} title - Title of the tab to flash
* {bool} tabOnly - Flash only the tab, "title" must be set to use this option
*/
drawAttention: function(config){

//helper function...
isEmpty = function(variable) { return (variable === undefined || variable === '')?true:false };

//defaults
var contentPanelID = (isEmpty(config.id)) ? '' : config.id;
var activatePanel = (isEmpty(config.activate)) ? true : config.activate;
var timesToFlash = (isEmpty(config.times)) ? 3 : config.times;
var title = (isEmpty(config.title)) ? 'XXXXX' : config.title; //default must be something ridiculous
var tabOnly = (isEmpty(config.tabOnly)) ? false : config.tabOnly;
var rate = (isEmpty(config.rate)) ? 200 : config.rate;

var tabs = mainLayout.getRegion('center').getTabs();
if(tabs.getTab(contentPanelID))
{
contentPanelToFlash = Ext.get(contentPanelID);
tabTextToFlash = Ext.select("span.x-tabs-text:contains("+title+")");

if(activatePanel) tabs.activate(contentPanelID);

var isCurrentlyVisible = true;
var pause = 0;
for(i=0;i<(timesToFlash * 2);i++)
{
if(isCurrentlyVisible)
{
setTimeout("tabTextToFlash.setVisible(false)",pause);
if(!tabOnly) setTimeout("contentPanelToFlash.setVisible(false)",pause);
}
else
{
setTimeout("tabTextToFlash.setVisible(true)",pause);
if(!tabOnly) setTimeout("contentPanelToFlash.setVisible(true)",pause);
}

isCurrentlyVisible = (isCurrentlyVisible)?false:true;
pause = pause + rate;
}
}
}

[generateindex]

I used the code and I LOVE it .. thanks very much gnosis ..

I've faced a problem where I have tabs with the same title. I modified the code to address this issue. I use the id of the content panel added to the layout.

Also, I have multiple layout objects. So, the layout object is passed to the function too.

/**
* Call attention to a content panel "tab" in the center region
* @param {object} config The config object
* config options:
* {string} id - The id of the contentPanel to flash
* {bool} activate - Switch to the content panel
* {int} times - Number of times to flash
* {bool} tabOnly - Flash only the tab, "title" must be set to use this option
* {layout} layout - layout to get the center of.
*/

function drawAttention(config){

var contentPanelID = (isEmpty(config.id)) ? '' : config.id;
var activatePanel = (isEmpty(config.activate)) ? true : config.activate;
var timesToFlash = (isEmpty(config.times)) ? 3 : config.times;
var tabOnly = (isEmpty(config.tabOnly)) ? false : config.tabOnly;
var rate = (isEmpty(config.rate)) ? 200 : config.rate;
var mainLayout = (isEmpty(config.layout)) ? false: config.layout;

var tabs = mainLayout.getRegion('center').getTabs();
if (isEmpty(tabs)) return false;
var tab = tabs.getTab(contentPanelID);
if(tab)
{
contentPanelToFlash = Ext.get(contentPanelID);
tabTextToFlash = tab.textEl;

if(activatePanel) tabs.activate(contentPanelID);

var isCurrentlyVisible = true;
var pause = 0;
for(i=0;i<(timesToFlash * 2);i++)
{
if(isCurrentlyVisible)
{
setTimeout("tabTextToFlash.setVisible(false)",pause);
if(!tabOnly) setTimeout("contentPanelToFlash.setVisible(false)",pause);
}
else
{
setTimeout("tabTextToFlash.setVisible(true)",pause);
if(!tabOnly) setTimeout("contentPanelToFlash.setVisible(true)",pause);
}

isCurrentlyVisible = (isCurrentlyVisible)?false:true;
pause = pause + rate;
}
}
return true;
}


A "partial" example of usage:

var gp = new Ext.GridPanel(grid, {title: title});
drawAttention({id: gp.getEl().id, activate: true, layout: innerLayout});

[Ephicient]

I'm an Ext infant, and I'm trying to implement your drawAttention() function using a standard Panel in Ext2.0, however, I receive the following error in Firebug, "mainLayout.getRegion is not a function" after adding a new tab using loadTab().

My code is as follows:

Ext.onReady(function(){

var tabpanel = new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
margins:'0 5 5 0',
items:[{
contentEl:'center',
title: 'Home',
autoScroll:true
}]
});

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el:'north',
height:50
}),{
region:'west',
id:'west-panel',
title:'Navigation',
split:true,
width:200,
minSize:175,
maxSize:300,
collapsible:true,
margins:'0 0 5 5',
layout:'accordion',
layoutConfig:{animate:true},
items:[{
contentEl: 'west',
title:'Home',
border:false,
iconCls:'nav'
},{
title:'Clock In/Out',
html:'<p><a href=\"javascript:loadTab(\'content.html\',\'Clock In\');\">Clock In</a></p>' +
'<p><a href=\"javascript:loadTab(\'content.html\',\'Clock Out\');\">Clock Out</a></p>' +
'<p><a href=\"javascript:loadTab(\'content.html\',\'Time Card\');\">Time Card</a></p>',
border:false,
iconCls:'settings'
},{
title:'Dispatch',
html:'<p><a href=\"javascript:loadTab(\'content.html\',\'Control Center\');\">Control Center</a></p>',
border:false,
iconCls:'settings'
},{
title:'Inventory',
html:'<p><a href=\"javascript:loadTab(\'content.html\',\'Physical Inventory\');\">Physical Inventory</a></p>',
border:false,
iconCls:'settings'
},{
title:'Reports',
html:'<p><a href=\"javascript:loadTab(\'content.html\',\'Clock In/Out\');\">Reports</a></p>',
border:false,
iconCls:'settings'
},{
title:'Administration',
html:'<p><a href=\"javascript:loadTab(\'content.html\',\'Administration\');\">Administration</a></p>',
border:false,
iconCls:'settings'
}]},
tabpanel

/*{ // std panel, no tabs
region:'center',
title:'Inventory',
margins:'0 5 5 0',
contentEl:'center',
autoScroll:true
}*/
]
});

function drawAttention(config){

//helper function...
isEmpty = function(variable) { return (variable === undefined || variable === '')?true:false };

//defaults
var contentPanelID = (isEmpty(config.id)) ? '' : config.id;
var activatePanel = (isEmpty(config.activate)) ? true : config.activate;
var timesToFlash = (isEmpty(config.times)) ? 3 : config.times;
var tabOnly = (isEmpty(config.tabOnly)) ? false : config.tabOnly;
var rate = (isEmpty(config.rate)) ? 200 : config.rate;
var mainLayout = (isEmpty(config.layout)) ? false: config.layout;

var tabs = mainLayout.getRegion('center').getTabs();
if(tabs.getTab(contentPanelID))
{
contentPanelToFlash = Ext.get(contentPanelID);
tabTextToFlash = Ext.select("span.x-tabs-text:contains("+title+")");

if(activatePanel) tabs.activate(contentPanelID);

var isCurrentlyVisible = true;
var pause = 0;
for(i=0;i<(timesToFlash * 2);i++)
{
if(isCurrentlyVisible)
{
setTimeout("tabTextToFlash.setVisible(false)",pause);
if(!tabOnly) setTimeout("contentPanelToFlash.setVisible(false)",pause);
}
else
{
setTimeout("tabTextToFlash.setVisible(true)",pause);
if(!tabOnly) setTimeout("contentPanelToFlash.setVisible(true)",pause);
}

isCurrentlyVisible = (isCurrentlyVisible)?false:true;
pause = pause + rate;
}
}
}

// add tab to TabPanel and check ifExists
loadTab = function (url,title) {
var tab = new Ext.Panel({
autoLoad:url,
title:title,
closable:true
});
tabpanel.add(tab);
//tabpanel.activate(tab);
drawAttention({id:tab.getId(), activate:true, layout:tabpanel.getLayout()});
}
});

Any help would be greatly appreciated.

[tryanDLS]

That's b/c it's 1.x code and you're using 2.0 code - that fn doesn't exist. You should be able to call Ext.getCmp() with the id you assigned to the region.

[Ephicient]

Thank you, that works. I simplified the solution quite a bit. Here's what I ended up with.

loadTab = function (url,title) {
var tabid = title.replace(' ','-');
if(!Ext.getCmp(tabid))
{
tabpanel.add(new Ext.Panel({id:tabid, title:title, autoLoad:url, closable:true}));
}
tabpanel.activate(Ext.getCmp(tabid));
}