dhtmlxウィンドウ内のフォームのブートストラップレイアウトを取得

Question

フォームを含むdhtmlxウィンドウがあります。私は、ブートストラップクラスで応答するフォームを取得したいと思います。今私の問題は、ウィンドウ内に独自のフォームを追加できないようで、入力フィールドのようにフィールドのclassNameを変更できないということです。

dhtmlxでフォームを作成しているときにclassNameを変更しようとしましたが、コンテナのclassNameが変更されるだけです。私はそれも要素のclassNameを変更する必要があります、そして親も同様に、ブートストラップはそれを理解することができます。

実際にウィンドウに可能なHTML要素を直接追加したいと思います。 dhtmlx生成フィールドを変更するよりもずっと簡単です。

私は私の問題を示すために、小さなJSFiddleをした：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>

ありがとうございました。

Answer 1

最後に、HTML要素を直接挿入しました。このようにして、私が望むように、私が望むフォームを作成することができます。

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>