EXT JS toLayout on Viewport doesnt show anything...

Question

After reading many example about adding new components in to existing container without reloading whole page I run in to small problem while combining tree and tabs inside Viewport component.

What I'm trying to do is to register on click event to tree node and load in to content container new component, depending on node type it can be tabpanel, gridpanel or any other available component.

here is short example of tree object:

{

xtype: 'treepanel', id: 'tree-panel', listeners: { click: function(n) {

var content = Ext.getCmp('content-panel');

content.setTitle(n.attributes.qtip);

//remove all components from content-panel content.removeAll();

content.add(dummy_tabs2);

content.doLayout();

return; } }} All DOM manipulation went fine, everything registered properly, new Title shown, but dummy_tabs2 are not shown. I did try to set various properties for doLayout(true|false, true|false) but nothing happens.

Am I doing something wrong?

Answer 1

Try to set the width and height of dummy_tabs2 before doLayout. Inspect with firebug, maybe the panel is there but you can't see.

Read Ext.Panel in the API.

When either specifying child items of a Panel, or dynamically adding Components to a Panel, remember to consider how you wish the Panel to arrange those child elements, and whether those child elements need to be sized using one of Ext's built-in layout schemes. By default, Panels use the ContainerLayout scheme. This simply renders child components, appending them one after the other inside the Container, and does not apply any sizing at all.

Hope this will help.

Answer 2

Now I get it, DOM works fine but EXTJS applying display hidden property to newly inserted elements. So what is left to do is to apply show() function to our new component. Folowing code would look like this:

{
  xtype: 'treepanel',
  id: 'tree-panel',
  listeners: {
    click: function(n) {

    var content = Ext.getCmp('content-panel');

    content.setTitle(n.attributes.qtip);

    //remove all components from content-panel
    content.removeAll();

    var container = content.add(dummy_tabs2);

    content.doLayout();

    container.show();

    return;
    }
}}