Results 1 to 10 of 10

Thread: How to fire befroe render on extended class

  1. #1
    Ext JS Premium Member
    Join Date
    Oct 2011
    Posts
    84

    Exclamation Answered: How to fire befroe render on extended class

    Event move fires but beforerender dont. What can be done about this? Or what am i missing or doing wrong?

    Code:
    Ext.define('TS.lib.Window',{
        extend:'Ext.window.Window',
        alias:'window',
        constructor:function(c){
            this.callParent(arguments);
            this.initConfig(c);
            this.on('beforerender',this.beforeRender);
            this.on('move',this.onMove);        
        },
           beforeRender:function(){alert(1);},
           onMove:function(){alert(2);}
    });
    Ext.create('TS.lib.Window');
    What I want is to have only one window of certain xtype present at any time.
    If i put handling into onRender the layout is bugy: (z-index messed up on some elements)

    Code:
    onRender : function(){
    	TS.lib.Window.superclass.onRender.apply(this,arguments);
    	this.autoEl = Ext.apply({}, this.initialConfig, this.autoEl);
    	
    	var same = Ext.ComponentQuery.query(this.xtype)[0];
    	if (same && same.id != this.id){
    		same.close();
    	};
    	this.y = this.y < 0 ? 0 : this.y;
    },
    efect of closing previous window on render...

    renderbug.jpg
    Last edited by Webtel; 2 Nov 2011 at 4:34 AM. Reason: elaboration

  2. Well in your case you override the listeners of your base class.

    Code:
     Ext.onReady(function() {
    
        Ext.define('TS.lib.Window',{
    	extend:'Ext.window.Window',
    	listeners:{
    		beforerender:{
    			fn: function(component, eOpts){
    				alert(1);
    			}
    		}
    	},
    	constructor:function(c){
    		this.callParent(arguments);
    		this.initConfig(c);
    	}
    });
    
    
    Ext.define('TS.lib.TestWindow',{
        extend:'TS.lib.Window',    
           
        constructor: function(c){
            
            this.callParent(arguments);
            this.initConfig(c);		
    			
    		
    		
    	}
        
    });
    
    var win = Ext.create('TS.lib.TestWindow', {
          width: 100,
          height: 100,
          listeners: {
            show: {
               fn: function(component, eOpts){
                    alert('2');
               }     
            }
          } 
      });
        
     win.show();
    
    });
    or define the listerners in your constructor

  3. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    Code:
    Ext.define('TS.lib.Window',{
        extend:'Ext.window.Window',
        listeners: {                  
                    beforerender: {
                           fn: function(component, eOpts){
                                alert(1);
                           }
                    },
                    move: {
                          fn: function(component, x, y, eOpts){
                                alert(2);
                          } 
                    } 
         },
    	alias:'window',
    	constructor:function(c){
    		this.callParent(arguments);
    		this.initConfig(c);
    			
    	}
    });
    });

  4. #3
    Ext JS Premium Member
    Join Date
    Oct 2011
    Posts
    84

    Exclamation thanks but not yet there

    thanks for your interest but it wont work if i then use this window like :

    Ext.create('TS.lib.Window',{
    listeners:{
    show:function(){alert(3)}
    }
    });

    any further suggestions?

  5. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    it doesn't work if the parameternumber aren't correct

    try

    show: function(component, eOpts){
    alert('');
    }

  6. #5
    Ext JS Premium Member
    Join Date
    Oct 2011
    Posts
    84

    Default

    sorry. i wasnt quite accurate with my description.
    full example would look like this.... (i create, extended, extended class....)

    can this be done?


    Code:
    Ext.define('TS.lib.Window',{
    	extend:'Ext.window.Window',
    	listeners:{
    		beforerender:{
    			fn: function(component,eOpts){
    				alert(1);
    			}
    		}
    	},
    	constructor:function(c){
    		this.callParent(arguments);
    		this.initConfig(c);
    	},
    });
    
    
    Ext.define('TS.lib.TestWindow',{
        extend:'TS.lib.Window',
    
        listeners:{
            show:{
               fn:function(){
                  alert(2)
               }
           }
        }
    });
    
    Ext.create('TS.lib.TestWindow',{width:100,height:100});

  7. #6
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    Well in your case you override the listeners of your base class.

    Code:
     Ext.onReady(function() {
    
        Ext.define('TS.lib.Window',{
    	extend:'Ext.window.Window',
    	listeners:{
    		beforerender:{
    			fn: function(component, eOpts){
    				alert(1);
    			}
    		}
    	},
    	constructor:function(c){
    		this.callParent(arguments);
    		this.initConfig(c);
    	}
    });
    
    
    Ext.define('TS.lib.TestWindow',{
        extend:'TS.lib.Window',    
           
        constructor: function(c){
            
            this.callParent(arguments);
            this.initConfig(c);		
    			
    		
    		
    	}
        
    });
    
    var win = Ext.create('TS.lib.TestWindow', {
          width: 100,
          height: 100,
          listeners: {
            show: {
               fn: function(component, eOpts){
                    alert('2');
               }     
            }
          } 
      });
        
     win.show();
    
    });
    or define the listerners in your constructor

  8. #7
    Ext JS Premium Member
    Join Date
    Oct 2011
    Posts
    84

    Default

    for now i ended up with modyfying TS.lib.TestWindow not to have any listeners just onShow method. Then i pass it in initComponent..

    Code:
    	constructor:function(c){
    		this.callParent(arguments);
    		this.initConfig(c);
    	},
    	initComponent:function(c){
    		this.callParent(arguments);
    		this.initConfig(c);
    		c && this.on('show',c.onShow);
    	},
    needless to say that doesent feel right. So if anybody can please provide me with some insight on what am i doing and what sholud be done.. please dont hasitate to respond.

  9. #8
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199
    Answers
    87

    Default

    first give the function onShow two input parameters, tell me what is happening then.

    your onShow method must look like this.

    onShow: function(component, eOpts){
    alert('1');
    }

    onShow: function(){alert('1'); }

    will probably not trigger. The listeners you apply to your object config or in the constructor.

  10. #9
    Ext JS Premium Member
    Join Date
    Oct 2011
    Posts
    84

    Default

    it triggers ok. but now im moved to another part of this dilema.

    i have window with a form. i want to have only one of that wndow kind present.
    when i call following on the constructor it kinda works but still form from 1st window remains (i load each form of xtype and got 2 requests). When i close 1st window manualy (clixck X) then everythings works ok

    How can i effectively destroyy/close window with all childs on other window constructor?..

    Code:
        constructor:function(c){
            var same = Ext.ComponentQuery.query(this.xtype)[0];
            if (same && same.id != this.id){
                same.close();
    
            };

  11. #10
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Code:
    Ext.define('TS.lib.Window',{
        extend : 'Ext.window.Window',
    
        initComponent: function() {
            var me = this;
            
            me.callParent(arguments);
            
            me.on('beforeshow', me.handleBeforeShow, me);
        },
        
        beforeDestroy: function() {
            var me = this;
            
            me.un('beforeshow', me.handleBeforeShow, me);
            
            me.callParent(arguments);
        },
        
        handleBeforeShow: function(win) {
            //do logic here
            //return false to stop show
        }
    });
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •