agorum.single

Das agorum.single-Layout kann nur ein einzelnes Element darstellen, das den gesamten verfügbaren Platz einnimmt. Dabei versucht es nicht (so wie alle anderen Layout-Arten) zwischen sichtbaren Elementen einen festen Abstand einzuhalten.

Das System setzt das single-Layout nur als Platzhalter ein, um die Einschränkung zu umgehen, dass eingedockte (docked) Elemente von Containern nicht nachträglich geändert werden können. Stattdessen verwendet das System als eingedocktes Element einen single-Container und tauscht dessen item.

Verwenden Sie aufgrund der Besonderheiten bei den Widget-Abständen das single-Layout nur für diesen Zweck.

Im Gegensatz zu den anderen Layouts kann das single-Layout nicht in einem statischen Beispiel demonstriert werden, da es für den dynamischen Austausch von Widgets zur Laufzeit gedacht ist. Daher wird hier nicht wie bisher nur eine Struktur per aon definiert, sondern es wird zusätzlich noch Event-Handling verwendet, das hier noch nicht näher besprochen wird.

Events

---

keine

Parameter

---

keine

Funktionen

---

keine

Beispiel

---

 

 

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.border',
  width: 600,
  height: 400,
  docked: {
    top: {
      type: 'agorum.toolbar',
      items: [
        {
          type: 'agorum.button',
          text: 'Highlight',
          name: 'highlight'
        }
      ]
    },
    west: {
      type: 'agorum.single',
      title: 'west',
      name: 'west',
      width: 100,
      items: [
        {
          type: 'agorum.vbox',
          background: 'white'
        }
      ]
    },
    center: {
      type: 'agorum.single',
      title: 'center',
      name: 'center',
      items: [
        {
          type: 'agorum.vbox',
          background: 'light'
        }
      ]
    },
    east: {
      type: 'agorum.single',
      title: 'east',
      name: 'east',
      width: 100,
      items: [
        {
          type: 'agorum.vbox',
          background: 'dark'
        }
      ]
    }
  }
});

let west = widget.down('west');
let center = widget.down('center');
let east = widget.down('east');

widget.down('highlight').on('clicked', () => {
  let tmp = east.items;

  east.items = center.items;
  center.items = west.items;
  west.items = tmp;
});

widget;