1. #1
    Sencha User
    Join Date
    Jan 2011
    Posts
    14
    Vote Rating
    0
    rickyclegg is on a distinguished road

      0  

    Default Rendering Children in a Container

    Rendering Children in a Container


    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.

  2. #2
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    537
    Vote Rating
    71
    Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough

      0  

    Default


    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
    Code:
    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
    Code:
    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

  3. #3
    Sencha User
    Join Date
    Jan 2011
    Posts
    14
    Vote Rating
    0
    rickyclegg is on a distinguished road

      0  

    Default


    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?

  4. #4
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    537
    Vote Rating
    71
    Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough

      0  

    Default


    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/

Similar Threads

  1. Tree not rendering children.
    By Absalom in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 16 Dec 2009, 1:07 AM
  2. Replies: 1
    Last Post: 4 Sep 2009, 7:09 AM
  3. toolbar not rendering to his container element
    By botgv in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 16 Sep 2008, 7:44 AM
  4. how to destroy / remove all children on a Container
    By sjivan in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 10 Jan 2008, 4:24 AM
  5. Rendering a Panel to an Existing Container
    By dayres in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 3 Dec 2007, 12:49 PM

Thread Participants: 1

Tags for this Thread