1. #1
    Sencha User zig999's Avatar
    Join Date
    Mar 2008
    Posts
    62
    Vote Rating
    2
    zig999 is on a distinguished road

      0  

    Question afterlayout with all child rendered

    afterlayout with all child rendered


    I have already found some post discussing this topic, but still can´t figure out a good way to to this.

    What event (if there is one) should I listen that garantees that ALL child elements (including nested ones) are already rendered? And how to get this without using bufered events?

    I tried with afterlayout, but only direct child is rendered.
    Am I doing something wrong?

    In the example, I would like to listen to an event, where I could reference for example this.zPanel1.zPanel2.zPanel3. But as zPanel2 and zPanel3 are not rendered I can't.

    Code:
    Ext.onReady(function () {
    	var v = new Ext.Panel({
    		layout: 'border',
    		renderTo: Ext.getBody(),
    		height: 300,
    		width: 400,
    		items: [{
    			xtype: 'panel',
    			region:'center',
    			ref: 'zPanel1',
    			itemId: 'zPanel1',
    			items: [{
    				xtype: 'panel',
    				ref: 'zPanel2',
    				itemId: 'zPanel2',
    				items: [{
    					xtype: 'panel',
    					ref: 'zPanel3',
    					itemId: 'zPanel3',
    					html: 'Internal panel'
    				}]
    			}]
    		}],
    		listeners: {
    			'afterlayout': {
    				fn: function () {
    					console.log('afterlayout');
    					//zPanel1 exists and is rendered
    					console.log(this.getComponent('zPanel1'));
    					console.log(this.getComponent('zPanel1').rendered);
    					//zPanel2 too, but not rendered
    					console.log(this.getComponent('zPanel1').getComponent('zPanel2'));
    					console.log(this.getComponent('zPanel1').getComponent('zPanel2').rendered);
    					//and zPanel3, but not rendered eather
    					console.log(this.getComponent('zPanel1').getComponent('zPanel2').getComponent('zPanel3'));
    					console.log(this.getComponent('zPanel1').getComponent('zPanel2').getComponent('zPanel3').rendered);
    				}
    			}
    		}
    	});
    });
    Thanks!

    Sieg

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,501
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Code:
    Ext.onReady(function () {
    	var v = new Ext.Panel({
    		layout: 'border',
    		renderTo: Ext.getBody(),
    		height: 300,
    		width: 400,
    		items: [{
    			xtype: 'panel',
    			region:'center',
    			ref: 'zPanel1',
    			itemId: 'zPanel1',
    			items: [{
    				xtype: 'panel',
    				ref: 'zPanel2',
    				itemId: 'zPanel2',
    				items: [{
    					xtype: 'panel',
    					ref: 'zPanel3',
    					itemId: 'zPanel3',
    					html: 'Internal panel'
    				}]
    			}]
    		}],
    		listeners: {
    			'afterlayout': {
                                    delay: 1,
    				fn: function () {
    					console.log('afterlayout');
    					//zPanel1 exists and is rendered
    					console.log(this.getComponent('zPanel1'));
    					console.log(this.getComponent('zPanel1').rendered);
    					//zPanel2 too, but not rendered
    					console.log(this.getComponent('zPanel1').getComponent('zPanel2'));
    					console.log(this.getComponent('zPanel1').getComponent('zPanel2').rendered);
    					//and zPanel3, but not rendered eather
    					console.log(this.getComponent('zPanel1').getComponent('zPanel2').getComponent('zPanel3'));
    					console.log(this.getComponent('zPanel1').getComponent('zPanel2').getComponent('zPanel3').rendered);
    				}
    			}
    		}
    	});
    });

  3. #3
    Sencha User zig999's Avatar
    Join Date
    Mar 2008
    Posts
    62
    Vote Rating
    2
    zig999 is on a distinguished road

      0  

    Default


    Thanks for answering Animal.
    I saw this solution as you discussed at http://extjs.com/forum/showthread.php?t=27289.

    But delay techniche sound so hacky and I don´t know if it is 100% trustable.

    I thought that maybe there was some other solution that I am missing from the docs, or something like that. An afterrender with renderAll flag, I really don´t know.

    If you don´t mind answering, do you use this solution in your developments? Have you ever found any problems with this approach?

    Thanks again.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,501
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I think there's a problem using layout: 'border' with only one item.

    Change it to ue layut: 'fit' and it works.

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,501
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Seems it's just a problem with border...

    Code:
    Ext.onReady(function () {
    	var v = new Ext.Panel({
    		layout: 'border',
    		renderTo: Ext.getBody(),
    		height: 300,
    		width: 400,
    		items: [{
    			xtype: 'panel',
    			region:'center',
    			ref: 'zPanel1',
    			itemId: 'zPanel1',
    			items: [{
    				xtype: 'panel',
    				ref: 'zPanel2',
    				itemId: 'zPanel2',
    				items: [{
    					xtype: 'panel',
    					ref: 'zPanel3',
    					itemId: 'zPanel3',
    					html: 'Internal panel'
    				}]
    			}]
    		}, {
                        region: 'south',
                        height: 10
                    }],
    		listeners: {
    			'afterlayout': {
    				fn: function () {
    					console.log('afterlayout');
    					//zPanel1 exists and is rendered
    					console.log(this.getComponent('zPanel1'));
    					console.log(this.getComponent('zPanel1').rendered);
    					//zPanel2 too, but not rendered
    					console.log(this.getComponent('zPanel1').getComponent('zPanel2'));
    					console.log(this.getComponent('zPanel1').getComponent('zPanel2').rendered);
    					//and zPanel3, but not rendered eather
    					console.log(this.getComponent('zPanel1').getComponent('zPanel2').getComponent('zPanel3'));
    					console.log(this.getComponent('zPanel1').getComponent('zPanel2').getComponent('zPanel3').rendered);
    				}
    			}
    		}
    	});
    });

  6. #6
    Sencha User zig999's Avatar
    Join Date
    Mar 2008
    Posts
    62
    Vote Rating
    2
    zig999 is on a distinguished road

      0  

    Default


    Even with the layout: 'fit', I still have to use the delay:1 config option.
    Using fit and without delay:1, I got the same results.
    Is that what you mean?

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,501
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I get all "true" output when I run

    Code:
    Ext.onReady(function () {
    	var v = new Ext.Panel({
    		layout: 'fit',
    		renderTo: Ext.getBody(),
    		height: 300,
    		width: 400,
    		items: [{
    			xtype: 'panel',
    			region:'center',
    			ref: 'zPanel1',
    			itemId: 'zPanel1',
    			items: [{
    				xtype: 'panel',
    				ref: 'zPanel2',
    				itemId: 'zPanel2',
    				items: [{
    					xtype: 'panel',
    					ref: 'zPanel3',
    					itemId: 'zPanel3',
    					html: 'Internal panel'
    				}]
    			}]
    		}],
    		listeners: {
    			'afterlayout': {
    				fn: function () {
    					console.log('afterlayout');
    					//zPanel1 exists and is rendered
    					console.log(this.getComponent('zPanel1'));
    					console.log(this.getComponent('zPanel1').rendered);
    					//zPanel2 too, but not rendered
    					console.log(this.getComponent('zPanel1').getComponent('zPanel2'));
    					console.log(this.getComponent('zPanel1').getComponent('zPanel2').rendered);
    					//and zPanel3, but not rendered eather
    					console.log(this.getComponent('zPanel1').getComponent('zPanel2').getComponent('zPanel3'));
    					console.log(this.getComponent('zPanel1').getComponent('zPanel2').getComponent('zPanel3').rendered);
    				}
    			}
    		}
    	});
    });

  8. #8
    Sencha User zig999's Avatar
    Join Date
    Mar 2008
    Posts
    62
    Vote Rating
    2
    zig999 is on a distinguished road

      0  

    Default




    I get the same result, true/false/false.
    Using firefox 3.0.10 and ext-3.0-rc1.1.
    I don´t have access to the SVN, maybe this is cause for some change that is not in the rc1.1!?!

    Any sugestions?

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,501
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Yes, it probably is. I'm on the latest code.

    It should be RC2 very soon.

  10. #10
    Sencha User zig999's Avatar
    Join Date
    Mar 2008
    Posts
    62
    Vote Rating
    2
    zig999 is on a distinguished road

      0  

    Default


    Ok, that´s the price I´m paying for not having a license yet.
    I´ll wait for the RC2. I´ll come back to this thread when this hapens.
    Till there, thanks a lot for your help.

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi