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/exampl...Tab/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();
                }
            }]
        });