DHTMLXのdhtmlXFormでブロック要素をそろえて並べる

こんにちは。beaglesoftの真鍋です。

弊社では構築するシステムの画面にはJavaScript UI Library, Ajax Components & HTML5 Framework - DHTMLXを利用しています。このライブラリは便利なライブラリで、昔のASP.NETライクに開発ができます。もちろん、最近はやりのAngularJS — Superheroic JavaScript MVW Frameworkなどのようなトレンドからは外れますが、基幹系システムにはちょうど良いのではないかと考えています。

なお、このDHTMLXは無料でも利用できますが、その場合のライセンスはGPL v2となります。基幹系のシステムで利用する場合は、ライセンスを購入することをお勧めします。

dhtmlXFormの項目揃え

dhtmlXFormで、入力項目-ボタン-表示項目のような項目を設定したいことがあります。基幹系のシステムではありがちなパターンですね。

screenshot3.png (5.3 kB)

これを設定するにはとりあえずblockタイプ内にカラムを作成すれば実現できますが、そのままでは下記の通りブロックの位置がずれます。

screenshot.png (30.4 kB)

対応方法

これに対応するためには、以下の通り blockのblockOffsetを0に設定することで解消できます。

screenshot2.png (28.4 kB)

<?xml version="1.0" encoding="UTF-8"?>
<items>
    <item type="settings" position="label-left" labelWidth="180"/>
    <!--<item type="block">-->
    <item type="input" name="hojoKamokuName" label="補助科目名" required="true" maxLength="10">
        <note width="300">補助科目名を設定します。10文字以内で入力してください。</note>
    </item>

    <item type="input" name="biko" label="備考" rows="3" inputWidth="300" inputHeight="100" maxLength="100">
        <note width="300">補助科目のメモを設定します。100文字以内で入力してください。</note>
    </item>

   <!-- ここにブロック要素を設定する -->
    <item type="block" blockOffset="0">
        <item type="input" name="kanjoKamokuCode" inputWidth="100" label="勘定科目" required="true">
            <note>補助科目が所属する勘定科目コードを設定します。</note>
        </item>
        <item type="newcolumn" />
        <item type="button" name="showSearchKanjoKamoku" value="..."/>
        <item type="newcolumn" />
        <item type="input" name="kanjoKamokuName" inputWidth="180" readonly="true">
        </item>

    </item>

    <item type="hidden" name="lockVersion"/>
    <item type="hidden" name="id"/>

    <item type="block" offsetLeft="150">
        <item type="button" name="save" value="更新"/>
        <item type="newcolumn" offset="10"/>
        <item type="button" name="cancel" value="キャンセル"/>
    </item>
    <!--</item>-->

</items>