TabPanel Blink

[OtavioF]

I'm trying to do my TabPanel tab blink when give a message error, but my TabPanel is created with xtype, in the example I found, it is created as var = new TabPanel Ext.TabPanel ({}) and then used an override in a file. js to be able to blink using tabPanel.blinkTab (); wherever you need, how to do this with xtype?

example link: http://extdesenv.com.br/extjs/examples/blinkTab/index.html

my code:

//Cria formulário
formulario = Ext.widget('form',{
xtype: 'form',
layout: 'form',
bodyPadding: 5,
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Descrição',
name: 'descricao',
id: 'descricao',
allowBlank: false
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:320,
margin: '20 0 0 0',
defaults:{
bodyPadding: 10
},
items:[{
title: 'Pontuação Comercial',
defaultType: 'textfield',
layout: 'vbox',
items: grid2
},{
title:'Templates',
defaultType: 'textfield',
layout: 'vbox',
items: grid3
}]
},{
xtype: 'textfield',
name: 'acao2',
id: 'acao2',
value: 'inserir',
hidden: true
},{
xtype: 'textfield',
name: 'idproduto',
id: 'idproduto',
value: '',
hidden: true
}],
buttons: [{
text: 'Salvar',
handler: function() {


var form = this.up('form').getForm(), s = '';


if (form.isValid()) {


jQuery.ajax({
type: "POST",
dataType: 'json',
url: "../comercial/produtos",
data: form.getValues(),
beforeSend: function(){
},
success: function(d){

if(d.acao == 'inserir'){
formulario.getForm().reset();

//error message and blink here



store.load();
win.close();
}else{
formulario.getForm().reset();
store.load();
win.close();
}

}
});


}
}
},{
text: 'Cancelar',
handler: function() {

formulario.getForm().reset();
win.close();
}
}]
});

[tvanzoelen]

Just feed this thing to the config


blinkTab : function(tab)
{
tab = Ext.isNumber(tab) ? this.getComponent(tab) : tab;

var task;
var objTab = Ext.get(this.getTabEl(tab));

if (!objTab || objTab._blinking )
{
return;
}

objTab._blinking = true;

task = Ext.TaskMgr.start({
scope : this
,interval : 500
,run : function()
{
if(task.taskRunCount == 10)
{
Ext.TaskMgr.stop(task);
objTab.addClass('ext-ux-tab-orange');
objTab._blinking = false;
return;
}

objTab.toggleClass('ext-ux-tab-orange');
}
});

var stopBlink = function()
{
objTab._blinking = false;
Ext.TaskMgr.stop(task);
objTab.removeClass('ext-ux-tab-orange');

tab.un('activate',stopBlink,this);
if(tab.el)
{
tab.mun(tab.el,'click',stopBlink,this);
}
};

tab.on('activate',stopBlink,this,{single:true});
if(tab.el)
{
tab.mon(tab.el,'click',stopBlink,this,{single:true});
}
}

[OtavioF]

tvanzoelen, i have a .js file with this config, (Ext.ux.BlinkTab.js) and i import in my application (<script type="text/javascript" src="../source/js/Ext.us.BlinkTab.js"></script>) but does not work,i think it's cause i've created my tabpanel using Xtype, am i wrong?


.js code:

Ext.override(Ext.TabPanel,{
blinkTab : function(tab)
{
tab = Ext.isNumber(tab) ? this.getComponent(tab) : tab;

var task;
var objTab = Ext.get(this.getTabEl(tab));

if (!objTab || objTab._blinking )
{
return;
}

objTab._blinking = true;

task = Ext.TaskMgr.start({
scope : this
,interval : 500
,run : function()
{
if(task.taskRunCount == 10)
{
Ext.TaskMgr.stop(task);
objTab.addClass('ext-ux-tab-orange');
objTab._blinking = false;
return;
}

objTab.toggleClass('ext-ux-tab-orange');
}
});

var stopBlink = function()
{
objTab._blinking = false;
Ext.TaskMgr.stop(task);
objTab.removeClass('ext-ux-tab-orange');

tab.un('activate',stopBlink,this);
if(tab.el)
{
tab.mun(tab.el,'click',stopBlink,this);
}
};

tab.on('activate',stopBlink,this,{single:true});
if(tab.el)
{
tab.mon(tab.el,'click',stopBlink,this,{single:true});
}
}
});

[tvanzoelen]

The xtype shouldnt matter. But I think you should override Ext.tab.Panel instead of Ext.TabPanel.

[OtavioF]

ok, i changed to Ext.tab.Panel, but now, i need to doing something like this: var = new TabPanel Ext.TabPanel ({}) in my xtype: 'tabpanel' to doing tabPanel.blink(); work, i tried to put an id, but does not work, what i have to do?

[OtavioF]

i think i got the xtype, but when i tried to put the blink, it does not work, i put an id in my xtype tabpanel (id: 'painel') and get it later.

console error: Uncaught TypeError: Object [object Object] has no method 'blinkTab'.

Code:


//Cria formulário
formulario = Ext.widget('form',{
xtype: 'form',
layout: 'form',
bodyPadding: 5,
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Descrição',
name: 'descricao',
id: 'descricao',
allowBlank: false
},{
xtype:'tabpanel',
id: 'painel',
plain:true,
activeTab: 0,
height:320,
margin: '20 0 0 0',
defaults:{
bodyPadding: 10
},
items:[{
title: 'Pontuação Comercial',
defaultType: 'textfield',
layout: 'vbox',
items: grid2
},{
title:'Templates',
defaultType: 'textfield',
layout: 'vbox',
items: grid3
}]
},{
xtype: 'textfield',
name: 'acao2',
id: 'acao2',
value: 'inserir',
hidden: true
},{
xtype: 'textfield',
name: 'idproduto',
id: 'idproduto',
value: '',
hidden: true
}],
buttons: [{
text: 'Salvar',
handler: function() {


var form = this.up('form').getForm(), s = '';


if (form.isValid()) {


jQuery.ajax({
type: "POST",
dataType: 'json',
url: "../comercial/produtos",
data: form.getValues(),
beforeSend: function(){
},
success: function(d){

if(d.acao == 'inserir'){
formulario.getForm().reset();

//blink
var tabPanel = Ext.get('painel');


tabPanel.blinkTab(0);


store.load();
win.close();
}else{
formulario.getForm().reset();
store.load();
win.close();
}

}
});


}
}
},{
text: 'Cancelar',
handler: function() {

formulario.getForm().reset();
win.close();
}
}]
});