PDA

View Full Version : Add items to panel at a certain position of its content (not insert at index!)



LeonM
26 Jun 2013, 11:57 AM
Consider the following panel:



Ext.create('Ext.panel.Panel', {
layout: 'fit',
title: 'parent',
height: 400,
width: 400,
html:
"<p>This is the body of the parent panel, it contains a simple HTML template.</p>" +
"<div id=\"someDiv\"></div>" +
"<p>And the parent HTML continues here...</p>",
renderTo: Ext.getBody()
});

So how do I add a panel (or any element for that matter) to this panel's content at the location of "someDiv", ideally replacing the div completely.

I have tried creating the child panel and then using:
render(parentPanel, 'someDiv')which kinda works, but I does not register the child panel as an item of the parent panel.

I also considered splitting the HTML content into several separate items, and then using insert() to place the child panel at the right position, but that will likely break complex HTML templates (i.e. tables) as Ext panels are wrapped in spans/divs

Any suggestions?

slemmon
27 Jun 2013, 10:06 PM
You'll need the HTML bookending your child panel to actually be managed components owned by the parent panel and its layout. Then the child panel between the html will be a third component - also managed by the parent layout. A possible example:



var panel2 = Ext.create('Ext.panel.Panel',{
title: 'Panel 2',
html: 'whatever goes in panel2'
});


Ext.create('Ext.panel.Panel', {
layout: 'anchor',
title: 'parent',
height: 200,
width: 400,
items: [{
xtype: 'component',
html: '<p>This is the body of the parent panel, it contains a simple HTML template.</p>'
}, panel2, {
xtype: 'component',
html: '<p>And the parent HTML continues here...</p>'
}],
renderTo: Ext.getBody()
});

LeonM
28 Jun 2013, 1:41 AM
You'll need the HTML bookending your child panel to actually be managed components owned by the parent panel and its layout. Then the child panel between the html will be a third component - also managed by the parent layout. A possible example:


I thought of that, but the problem is that Ext components are always (?) wrapped in a div or span, thus when the HTML template gets slightly more complicated it will break.

Say for example that I need an Ext panel to be rendered into a table body of the template, then the table opening tag will be in the first component, and the close tag in the second/last. When those components are wrapped in div's, that table will break.

That's why I thought of inserting an 'temporary' inline element (like a span) into the template (that's done by the server), to use it as an identification point and then let ExtJS render a panel at that location, preferably replacing the temporary element. I know that it's possible, I just need to register the child to be an item of the parent, so it can be managed by its layout.