1 Attachment(s)
Extending Panel: How can I manipulate the layout regions?
I'm trying to extend Ext.Panel, so I can specify the layout and (dynamically) the contents of the various layout regions. I have not figured out how or when the regions actually appear in the DOM so I can manipulate them. I'm using a border layout and in my simplified example I'm only using the 'south' and 'center' region and want to manipulate the 'center' region to add an image. Here's the code I have (full demo code in attachment):
Code:
Test.ImagePanel = Ext.extend( Ext.Panel, {
layout: 'border',
img: null,
initComponent : function() {
// Configure the layout for this panel
Ext.apply(this, {
layout: 'border',
items: [{
region: 'center',
border: false,
titlebar: false,
deferredRender: false
},
new Ext.Slider({
animate: false,
width: 200,
value: 50,
minValue: 0,
region: 'south',
maxValue: 100
})
]});
// Invoke super-class initialization
Test.ImagePanel.superclass.initComponent.call(this);
this.imagePanel = this.items.itemAt(0);
},
afterRender: function(ct) {
/* XXX This doesn't work because the imagePanel is not present in the DOM! */
Ext.DomHelper.append(this.imagePanel.body.dom, {
tag:'div',children:[{
tag:'img',src:this.img
}]
});
return;
},
...
I guess I could make yet another panel extension for just holding the image and do the manipulation in the onRender or afterRender of that panel, but that seems like such a waste. Is there a better way?
Thanks,
Brandon
1 Attachment(s)
Extending Panel: How can I manipulate the layout regions?
Quote:
why not just include the image as html : "<img src='" + this.img '">" in the center panel?
Thanks for the suggestion. I tried that and while it does seem to put that HTML in the body of the panel, it's still not clear to me when and how I can manipulate the contents of the layout regions. Ultimately, this example is highly simplified test code. I want to be able to further modify the contents of this panel at runtime, but this was just the first step.
Having done what you suggest, I also now discover that there must be another bug in my code that is causing the panel not to be laid out in the proper location. Firebug shows it being in the top-left as opposed to below the stub box component that makes up the north region of its parent. I'm reattaching the example code as at the very least, the image was missing. I'm off to try to figure out what that might be.
When are DOM elements available
Well, I've gotten further, but I remain perplexed on the original question, which has bitten me in other ways (as I originally expected). The question is, when do the DOM elements for a panel appear in the DOM? Is there a callback method (i.e., from a template method) that is guaranteed to occur after this? Is there an event I can listen for? I need to explicitly change the size of some div elements after they are rendered, but I don't know when they are actually in the DOM.
In my panel subclass I have:
Code:
initComponent : function() {
var rid = this.rightImgId = Ext.id();
var lid = this.leftImgId = Ext.id();
// --- snip out construction of this.slider and this.toggleButton
// Configure the layout for this panel
Ext.apply(this, {
layout: 'border',
items: [{
region: 'center',
border: false,
titlebar: false,
deferredRender: false,
html: '<div id=\"' + lid + '" >' +
'<img src="' + this.leftImg + '" />' +
'</div><div id=\"' + rid + '" >' +
'<img src="' + this.rightImg + '"/>' +
'</div>',
autoScroll: true
},{
region: 'south',
items: [ this.slider, this.toggleButton ]
}
]});
// --- snip out additional inconsequential initialization
Test.ImagePanel.superclass.initComponent.call(this);
},
Given the above initialization code, when is it safe to invoke
Code:
Ext.get(this.leftImgId)
and expect to get an element back? I've tried (again) to do this in afterRender, but none of the DOM elements are available.
