PDA

View Full Version : afterlayout with all child rendered



zig999
1 Jun 2009, 4:37 AM
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.



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

Animal
1 Jun 2009, 4:42 AM
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);
}
}
}
});
});

zig999
1 Jun 2009, 5:00 AM
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.:)

Animal
1 Jun 2009, 5:15 AM
I think there's a problem using layout: 'border' with only one item.

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

Animal
1 Jun 2009, 5:17 AM
Seems it's just a problem with border...



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

zig999
1 Jun 2009, 5:24 AM
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?:-?

Animal
1 Jun 2009, 5:43 AM
I get all "true" output when I run



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

zig999
1 Jun 2009, 6:17 AM
:-/

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?

Animal
1 Jun 2009, 6:18 AM
Yes, it probably is. I'm on the latest code.

It should be RC2 very soon.

zig999
1 Jun 2009, 6:23 AM
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.=D>