1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    11
    Vote Rating
    0
    OtavioF is on a distinguished road

      0  

    Default Unanswered: TabPanel Blink

    Unanswered: TabPanel Blink


    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:
    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();
                    }
                }]
            });

  2. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Answers
    85
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Just feed this thing to the config

    Code:
    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});
    		}
    	}

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    11
    Vote Rating
    0
    OtavioF is on a distinguished road

      0  

    Default


    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:
    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});
    		}
    	}
    });

  4. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Answers
    85
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


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

  5. #5
    Sencha User
    Join Date
    Oct 2012
    Posts
    11
    Vote Rating
    0
    OtavioF is on a distinguished road

      0  

    Default


    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?

  6. #6
    Sencha User
    Join Date
    Oct 2012
    Posts
    11
    Vote Rating
    0
    OtavioF is on a distinguished road

      0  

    Default


    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:
    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();
                    }
                }]
            });

Thread Participants: 1

Tags for this Thread