Dieses Anwendungsbeispiel zeigt, wie man dynamisch ControlPanels erzeugen kann und wie diese mit ihren Dom-Elementen per ControlPanels.ConnectDom() verbunden werden.

Ein Klick auf Neuen Abschnitt hinzufühen erzeugt den Html-Code für ein neues Panel und fügt diesen mit xInnerHtml() einem bestehenden Div-Element hinzu. Dabei werden die HTML-Elemente der bestehenden Panels gelöscht und es werden neue HTML-Elemente für alle Panels erzeugt. Damit geht die interne Verbindung zwischen den ControlPanel Objekten und ihren HTML-Elementen verloren und müssen mit ControlPanels.ConnectDom() neu erstellt werden.

Dieses Beispiel stammt aus dem Blogbeitrag Online-Rechner für MAC (Mittlere Aerodynamische Flügeltiefe).

Eingabe

Grafik

Ausgabe

Code Ausschnitt

function CWing() {
  this.Parts = [];
   :
}

CWing.prototype.Reset = function() {
  this.Parts = [];
   :
}

CWing.prototype.NewPart = function() {
   : 
  this.Parts.push( part );
}

CWing.prototype.ComputeMAC = function() {
   :
}

var WingModel = new CWing();
var PartsPanels = [];
var WingGraph = null;

function NewWingPart() {
  WingModel.NewPart();
  NewPartControlPanel();
  UpdateAll();
}

function NewPartControlPanel() {
  var partIx = PartsPanels.length;

  var partPanel = ControlPanels.NewPanel( { 
    AutoInit: false,
    ModelRef: 'WingModel.Parts['+partIx+']', 
    OnModelChange: UpdateAll.
     : 
  } );
  partPanel.AddHeader( { ColSpan: 4, ... } );
  partPanel.AddTextField( { ... } );
   :

  // create panel html and add it to already existing html
  var container = xGet( 'calcform' );
  var html = xInnerHTML( container );
  html += partPanel.GetHtml();
  xInnerHTML( container, html );

  // connections between panels and dom objects 
  // are lost by xInnerHtml(), so we have to reconnect them
  ControlPanels.ConnectDom( PartsPanels ); 

  // now manually init new partPanel, 
  // because AutoInit is not working after xOnLoad() has finished
  partPanel.Init();

  PartsPanels.push( partPanel );
}

function Init() {
  NewWingPart();
}

xOnLoad( Init );

function UpdateAll() {
  WingModel.ComputeMAC();
  ControlPanels.Update();
  UpdateGraph( WingGraph );
}

function UpdateGraph( g ) {
  // draw graphic into canvas g
  :
}

function Reset() {
  ControlPanels.DeletePanels( PartsPanels );
  PartsPanels = [];
  WingModel.Reset();
  xInnerHTML( 'calcform', '' );
  NewWingPart();
}
</jscript>

== Eingabe ==

{{div|id=calcform}}
{{end div}}

{{form jsbutton|Reset()|Reset}}
{{form jsbutton|NewWingPart()|Neuen Abschnitt hinzufügen}}


== Grafik ==

<jscript>

WingGraph = NewGraph2D( { 
  DrawFunc: UpdateGraph, 
   :
} );

</jscript>


== Ausgabe ==

<jscript>

ControlPanels.NewPanel( { 
  ModelRef: 'WingModel', 
   :

} ).AddHeader( { 
  Text: 'Resultierende Flügel-Parameter', 
  ColSpan: 4 

} ).AddTextField( { 
   :

} ).Render();

</jscript>