Erhalten Sie ein Bootstrap-Layout für ein Formular in DHTMLX-Fenster

Question

Ich habe ein DHTMLX-Fenster, das ein Formular enthält. Ich möchte eine ansprechende Form mit Bootstrap-Klassen erhalten. Mein Problem ist im Moment, dass ich nicht in der Lage bin, mein eigenes Formular innerhalb des Fensters hinzuzufügen, und ich kann den Klassennamen der Felder nicht ändern (wie das Eingabefeld).

Ich habe versucht, die Klasse zu ändern, während das Formular mit DHTMLX erstellen, aber es ändert einfach den Klassennamen des Containers. Ich muss auch den Klassennamen seiner Elemente und auch den Eltern ändern, damit Bootstrap es verstehen kann.

Ich möchte HTML-Elemente direkt hinzufügen, wenn das Fenster tatsächlich möglich ist. Es wäre viel einfacher als das Modding der DHTMLX generierten Felder.

machte ich einen kleinen JSFiddle mein Problem zu zeigen: http://jsfiddle.net/davidgourde/tnqfp6y8/1/

var myForm, formData; 
 
var dhxWins, w1; 
 
function doOnLoad() { 
 
    formData = [ 
 
    {type: "settings", position: "label-left", labelWidth: 100, inputWidth: 120}, 
 
    {type: "block", inputWidth: "auto", offsetTop: 12, list: [ 
 
     {type: "input", label: "Login", value: "p_rossi", className: "form-control"}, 
 
     {type: "password", label: "Password", value: "123"}, 
 
     {type: "checkbox", label: "Remember me", checked: true}, 
 
     {type: "button", value: "Proceed", offsetLeft: 70, offsetTop: 14} 
 
    ]} 
 
    ]; 
 
    dhxWins = new dhtmlXWindows(); 
 
    dhxWins.attachViewportTo("vp"); 
 
    w1 = dhxWins.createWindow("w1", 10, 10, 300, 250); 
 
    w1.denyResize(); 
 
    myForm = w1.attachForm(formData, true); 
 
} 
 
doOnLoad();

div#vp { 
 
    height: 600px; 
 
    border: 1px solid #dfdfdf; 
 
}

<link rel="stylesheet" href="https://2a6781b6e7331b7c52c1706cd28c7de3f641b52b.googledrive.com/host/0B4bedT44-LokVFBFUXlaVEthaFE?t=.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://ecropolis.s3.amazonaws.com/ui/libs/moment.min.js"></script> 
 
<script src="https://344bb70794e57c6753700eb885a1f4eb0c383612.googledrive.com/host/0B4bedT44-LokaV9tODJoX29BVFk"></script> 
 

 
<div id="vp"></div>

Thank you very much.

Answer 1

Schließlich habe ich HTML-Elemente direkt eingefügt. So kann ich die gewünschte Form erstellen, genau wie ich es möchte.

var myForm, formData; 
 
\t \t var dhxWins, w1; 
 
\t \t function doOnLoad() { 
 
\t \t \t dhxWins = new dhtmlXWindows(); 
 
\t \t \t dhxWins.attachViewportTo("vp"); 
 
\t \t \t w1 = dhxWins.createWindow("w1", 10, 10, 300, 250); 
 
\t \t \t myForm = w1.attachHTMLString(
 
     \t '<div class="container">' + 
 
     \t '<div class="form-group col-xs-12 col-sm-6">' + 
 
     \t \t '<label>label</label>' + 
 
      '<div>' + 
 
      \t '<input class="form-control" type="text">' + 
 
      '</div>' + 
 
      '</div>' + 
 
     '</div>' 
 
    ); 
 
\t \t } 
 
doOnLoad();

div#vp { 
 
\t \t \t height: 600px; 
 
\t \t \t border: 1px solid #dfdfdf; 
 
\t \t }

<link rel="stylesheet" href="https://2a6781b6e7331b7c52c1706cd28c7de3f641b52b.googledrive.com/host/0B4bedT44-LokVFBFUXlaVEthaFE?t=.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://ecropolis.s3.amazonaws.com/ui/libs/moment.min.js"></script> 
 
<script src="https://344bb70794e57c6753700eb885a1f4eb0c383612.googledrive.com/host/0B4bedT44-LokaV9tODJoX29BVFk"></script> 
 

 
<div id="vp"></div>