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).
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>