[CLOSED] Appending content problem

[sz_146]

Using 0.6, I have a viewport with borderlayout. In the north panel I have a Logo. In the west panel I have a tree. In the centre panel I have content. The North panel looks like this :

                    <North>                        
                        <ext:Panel ID="Panel1" runat="server" Height="80px">                                                    
                            <Content>
                                <img class="logo"  src="images/logo.png" />
                            </Content>                                                 
                        </ext:Panel>                       
                    </North>

Now I want to be able to append content and buttons etc. to the North panel at runtime depending on what is clicked in the west panel. When I do :

Ext.get('Panel1_Content').update('SOME HTML');

I get the North panel wiped off and repainted with the 'SOME HTML'.

How can I APPEND to the content instead of REPLACING i.e. to leave the logo in place and add buttons to the right for example.

[Vladimir]

Hi,

Ext.get('Panel1').body.update('SOME HTML');

[sz_146]

ERROR :

Ext.get("Panel1").body is undefined

by doing this :

Ext.get('Panel1').body.update('<div id=\"topbuttons\"><img src=\"../images/button_add2.png\" alt=\"Add Item\" />
');

Also once I have this image button added to the panel, is it easier to attach a click handler to it ? thanks

[Vladimir]

Hi,

sorry it was my mistake, need use Ext.getCmp

Ext.getCmp('Panel1').body.update('SOME HTML');

[sz_146]

Works but again it wipes it all off, while I want to leave the logo there and add the new image button to the right of the logo. May be to add a div with buttons or something. Also do you know how do I then define a click handler for the new image button I add ? thanks

[sz_146]

I am now using the following code and Although I can see in firebug that the elements get added to the Panel_Content div, they are not displayed in the browser.

        var dh = Ext.DomHelper;
        var list = dh.append('Panel1_Content', {
            id: 'topbuttons',
            cls: 'topbuttons',
            tag: 'ul',
            children: [
                {
                    tag: 'li',
                    id: 'item0',
                    html: '<img src=\"../images/button_add-clinic_2.png\" alt=\"Add Clinic\" />'
                }
            ]
        });
        
        Ext.getCmp('Panel1').doLayout();

[geoffrey.mcgill]

Hi sz_146,

The following code should add whatever html fragment you pass in the second argument to the end of the Panel's Body.

Example

[CODE]var date = "<br />" + new Date();
Panel1.body.insertHtml("beforeEnd", date);[CODE]

http://www.extjs.com/deploy/dev/docs/?class=Ext.Element (see .insertHtml())

Hope this helps.

[sz_146]

Thank you Geoff.