PDA

View Full Version : How do you insert Ext.Panel into DOM?



IvanJ
17 May 2011, 9:34 AM
When I try something like

Ext.getBody().insertFirst({
xtype: 'panel'
, title: 'test'
, html: 'aaaaaaa'
});

... all I see is "aaaa..." - not the actual panel with fancy title.

How would I go about accomplishing what I want?

Thanks!

nishnet2002
17 May 2011, 2:31 PM
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>New Panel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="ext-all.css"/>
<script type="text/javascript" src="./ext-3.3.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="./ext-3.3.1/ext-all-debug-w-comments.js"></script>
</head>
<body id='bodyId'>
</body>
<script type='text/javascript' >
Ext.onReady(function()
{
Ext.create(
{
xtype:'panel',
title:'newPanel',
layout:'fit',
autoHeight: true,
height:'auto',
html:'aaa',
renderTo:'bodyId'
}
)});
</script>
</html>

IvanJ
17 May 2011, 2:40 PM
...I should've clarified: I do not want to make the whole body into a panel, and I do not wish to use any kind of pre-hardcoded markup to accomplish this.

nishnet2002
17 May 2011, 3:00 PM
[CODE]
Ext.onReady(function()
{
Ext.create(
{
xtype:'panel',
title:'newPanel',
height:'100',
width:'100',
html:'aaa',
renderTo:Ext.getBody()
}
)});

[CODE]


This will create a 'div' of 100x100 in the body dom.
Hope this helps.

IvanJ
17 May 2011, 4:33 PM
I don't think I'm explaining my dilemma properly. I don't want to turn the actual body into a panel. I want to add a stand-alone floating panel.

I can easily accomplish this by using pre-coded markup. I guess I could also generate the markup and then use "renderTo", to accomplish it.

But please follow the logic I'm doing here. Why is it not working?

Ext.getBody().insertFirst({
xtype: 'panel'
, title: 'test'
, html: 'aaaaaaa'
});

kembuco
17 May 2011, 8:13 PM
The reason your code isn't working is that Ext.Element.insertFirst is intended to insert an element into another element using a passed in element or DomHelper config. What you are passing in is being interpreted as a DomHelper config, hence you are only seeing the text you supplied. However, I imagine that should be inside of a div or such.

Anywho, you will have to renderTo some element. If you don't want that to be the body, you can use any of the methods you mentioned.