1. #1
    Sencha User zig999's Avatar
    Join Date
    Mar 2008
    Posts
    53
    Vote Rating
    1
    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,483
    Vote Rating
    35
    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
    53
    Vote Rating
    1
    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,483
    Vote Rating
    35
    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,483
    Vote Rating
    35
    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
    53
    Vote Rating
    1
    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,483
    Vote Rating
    35
    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
    53
    Vote Rating
    1
    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,483
    Vote Rating
    35
    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
    53
    Vote Rating
    1
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar