[INFO REQ] Creating panel inside a popup

[henrique]

I have a problem with creating a panel inside a popup.

If I place the panel information in the settings, the popup is mounted as expected. But if I try to create it with the popup being displayed on the screen gives error.

The error occurs in the Widget line 2061.js, saying that the insertBefore function does not exist.

I put an example below to demonstrate the error. When click in the OK button, of the popup, the error occurs.

import Popup from '../../lib/Core/widget/Popup.js';
import Panel from '../../lib/Core/widget/Panel.js';
import Button from '../../lib/Core/widget/Button.js';

// button that display a popup containing html
new Button({
  appendTo: document.body,
  cls: "b-raised",
  text: "Show html popup",
  style: "margin-right: .5em",
  onClick: function (e) {
    const popup = new Popup({
      header: "A simple text Popup",
      autoShow: false,
      centered: true,
      closeAction: "destroy",
      closable: true,
      width: "30em",
      bbar: [
        {
          text: "Close",
          minWidth: 100,
          onAction: "up.close"
        }
      ],
      html: `<h3 style="margin-top:0.5em">Bacon ipsum dolor </h3>
                    <p style="line-height:1.5em">amet flank ribeye ham hock, 
                     rump alcatra pork belly pancetta leberkas bacon shoulder 
                    meatloaf ball tip pig. Tongue jerky meatloaf pancetta 
                    pork sirloin. Hamburger corned beef ball tip cupim 
                    sirloin frankfurter tri-tip. Swine kevin ham hock, 
                    drumstick flank pig shoulder shankle. Tri-tip pork 
                    chop fatback turducken pork salami. Tongue boudin 
                    salami flank bacon sirloin</p>`
    });
    popup.show();
  }
});

// button that displays a popup containing widgets
new Button({
  appendTo: document.body,
  cls: "b-raised",
  text: "Show widget popup",
  onClick: function (e) {
    const popup = new Popup({
      header: "A Popup containing Widgets",
      autoShow: false,
      centered: true,
      closable: true,
      closeAction: "destroy",
      width: "20em",
      minHeight: "18em",
      bbar: [
        {
          text: "Cancel",
          minWidth: 100,
          onAction: "up.close"
        },
        {
          text: "OK",
          minWidth: 100,
          cls: "b-raised b-blue",
          onAction: () => {
const panel = new Panel({
    appendTo : popup,
    height   : '20em',
    width    : '40em',
    header   : 'Panel header',
    tools    : {
        destroy : {
            cls     : 'b-fa b-fa-times',

        // 'up.' means look in owning widgets.
        // Implemented on the Panel
        handler : 'up.onPanelCloseClick',
        tooltip : 'Close this Panel'
    }
},
tbar : {
    items : {
        save : {
            icon    : 'b-fa-save',
            tooltip : 'Save content'
        },
        remove : {
            icon    : 'b-fa-trash',
            tooltip : 'Delete content'
        },
        change : {
            icon    : 'b-fa-arrow-left',
            tooltip : 'Move toolbar',

            onClick() {
                const
                    tbar = this.up('toolbar'),
                    dock = { t : 'left', r : 'top', b : 'right', l : 'bottom' }[tbar.dock[0]];

                tbar.dock = dock;
                this.icon = `b-fa-arrow-${dock === 'bottom' ? 'right' : 'left'}`;
            }
        }
    }
},
bbar : [
    {
        text : 'Button in bottom toolbar'
    }
],
html : `Bacon ipsum dolor amet flank ribeye ham hock rump, 
    alcatra pork belly pancetta leberkas bacon shoulder 
    meatloaf ball tip pig. Tongue jerky meatloaf pancetta 
    pork sirloin. Hamburger corned beef ball tip cupim 
    sirloin frankfurter tri-tip. Swine kevin ham hock, 
    drumstick flank pig shoulder shankle. Tri-tip pork 
    chop fatback turducken pork salami. Tongue boudin 
    salami flank bacon sirloin`,

// Close Tool's handler resolved here
onPanelCloseClick(e, panel) {
    panel.destroy();
}
});

      }
    }
  ]      
});
popup.show();
  }
});

[Animal]

You don't have to put a Panel inside a Popup.

A Popup isa Panel.

And you don't appendTo Containers like Popup/Panel

Containers have child items

So you might do

p = new Popup({
    height : 400,
    width : 600,
    title : 'Foo',
    tbar  : [{
        text : 'A Button'
    }],
    items : {
        textfield1 : {
            type : 'textfield',
            label : 'Label',
        }
    },
    autoShow : false,
    centered : true
});
p.show();

When dealing with Containers, you don't have to instantiate or render. Config objects with a type are promoted. The Containers layout renders the child items.

[Animal]

And of course you can add and remove

child widgets, and of course you can add a config object with a type and it will be promoted to an instantiated widget, and added to the layout. And be returned from the add method.

[henrique]

Thanks for the return! Yes, I had noticed my mistake after I posted it on the forum...