Rendering Children in a Container

[rickyclegg]

I am new to Ext JS and JavaScript in general. I come from a ActionScript background and am trying to get my head around the things I would do in Flash and how I go about them in Ext JS.

In ActionScript if i created

class Container extends Sprite
{
public function Container()
{
var child:Sprite = new Sprite();
addChild(child);
]
}

The variable child will be rendered inside of Container.

I am trying to create a Container in Ext JS and add children dynamically to it. But I cannot seem to access the correct way way to add children. Child.render(this.container) seems to be the div holding Advert. I am trying to target the instance of Advert. And "this" doesn't seem to be working for me.

info.burrows.validus.view.Advert = Ext.extend(Ext.Container,
{
autoEl: 'div',

layout: 'vbox',

onRender: function()
{
var tb = new Ext.Toolbar();
tb.render(this.container);
tb.add({text:'Button 1'});
tb.add({text:'Button 2'});
tb.doLayout();
}
});
Ext.reg('advert', info.burrows.validus.view.Advert);

The main application JS contains

Ext.onReady(function()
{
// Create container
var banner = Ext.getBody().createChild("<div id='banner' ></div>");

// Create Advert
var ad = new info.burrows.validus.view.Advert(
{
id: 'ad',
xtype: 'advert',
});
ad.render(banner);

});

Which gives me the Firebug Error "target is undefined - target.addClass(this.targetCls);"

Any help anyone can give would be great.

[Tim Toady]

You don't need to call render. Ext takes care of that stuff automatically. Here is a small example on how to dynamically add a component.

The following code creates your viewport and statically places a panel in it

new Ext.Viewport({
    layout: 'fit',
    renderTo: Ext.getBody(),
    items: [
    {
        xtype: 'panel',
        title: 'My panel',
        layout: 'form',
        id: 'myPanel'
    }
    ]
});

If you want to add a textfield to it dynamically simply do the following

var newTextfield = new Ext.form.TextField();

var myPanel = Ext.getCmp('myPanel');    //Get the panel based on the id (Don't do this all over the place, there are better ways)
myPanel.add(newTextfield);
myPanel.doLayout();       //Since the panel is already rendered we need to call doLayout so that we can see our text field

[rickyclegg]

Does the view port always replace the entire body?

At the moment I just want to create a small animated banner to sit with another website. I like the idea of Viewport. Can you specify where to render it like other components?

[Tim Toady]

Yeah it always renders itself to the body. It will do it regardless and I shouldn't have specified renderTo. Take a look at the api for it.
http://dev.sencha.com/deploy/dev/doc...s=Ext.Viewport

You can however use renderTo on any type of component you just specify an id of an html element for your component to renderTo. Any children of your component do not need renderTo specified. See some of the examples, they do it.
http://dev.sencha.com/deploy/dev/examples/