PDA

View Full Version : How can I use an Ext4 panel inside an Ext3 container?



Iteron
15 Aug 2011, 10:24 AM
What is the correct way of using Ext 4 components inside Ext 3 components? For example a Ext4 panel as one of the regions of a border-layout Ext3 panel. Or an Ext4 tab inside an Ext3 TabPanel which also contains other legacy Ext3 tabs.

Simply trying to add it as normal gives a "this.container is undefined" error.

This code works (Ext3 only)

new Ext.Viewport({
layout: 'border',
border: true,
items: [
new Ext.Panel({
title: 'Ext3',
region: 'center',
html: 'This is an Ext3 region',
border: true
}),
new Ext.Panel({
title: 'Ext 4',
region: 'south',
html: 'This should be an Ext 4 region',
border: true,
height: 200
})
]
});

This one (Ext3 + Ext4) fails with "this.container is null" in ext-all-sandbox-debug.js @28570


new Ext.Viewport({
layout: 'border',
border: true,
items: [
new Ext.Panel({
title: 'Ext3',
region: 'center',
html: 'This is an Ext3 region',
border: true
}),
new Ext4.Panel({
title: 'Ext 4',
region: 'south',
html: 'This should be an Ext 4 region',
border: true,
height: 200
})
]
});

Ext3 and Ext4 are included on the page and otherwise work (for example Ext4 windows on top of the Ext3 content), just nothing where I try to put Ext4 components inside the layout of an Ext3 one.

skirtle
16 Aug 2011, 12:31 PM
Perhaps you could inject the Ext 4 panel at the HTML level using renderTo? Might need some trickery to handle resizing but I see no reason why this couldn't be made to work.