Now I can only explain how I used form module cause it difficult to take out dialog part of my app.
First of all I create new dialog window:
dialog_window = $('<div id="dd" class="easyui-dialog" data-options="closed:true" style="padding:5px"></div>');
dialog_window.appendTo('BODY');
Than build dialog_window_config with default parameters like in documentation (title, width, height, etc).
Important! I load form in dialog thru 'href' dialog param:
{ href: '/form/common/cable.html' }
After form loading I use onLoad handler for configuration combobox field(s):
const cableOnLoad = (user, dialog_name, data) => {
const $vendor = $('#cd_vendor_id');
$vendor.combobox({
url: config.remote.api + sections['vendors'].rest + '?for_select',
});
if (data !== undefined) {
$vendor.combobox('setValue', data.cd_vendor_id);
}
};
My /form/common/cable.html form:
<form id="cable_create_form">
<table class="form">
<tr>
<td>{{common.cable.dialog.create.label.part_number}}:</td>
<td><input class="easyui-textbox" name="part_number" style="width:250px" data-options="required:true"/></td>
</tr>
<tr>
<td>{{common.cable.dialog.create.label.awg}}:</td>
<td><input class="easyui-textbox" name="awg" style="width:250px" data-options="required:true"/></td>
</tr>
<tr>
<td><label for="is_twisted">{{common.cable.dialog.create.label.twisted}}:</label></td>
<td>
<input type="hidden" name="is_twisted" value="0"/>
<input class="easyui-checkbox" type="checkbox" name="is_twisted" id="is_twisted" value="1"/>
</td>
</tr>
<tr>
<td>{{common.cable.dialog.create.label.vendor}}:</td>
<td><input class="easyui-combobox" name="cd_vendor_id" id="cd_vendor_id" style="width:250px;" data-options="required:true"></td>
</tr>
<tr>
<td>{{common.cable.dialog.create.label.comment}}:</td>
<td><input class="easyui-textbox" name="comment" data-options="multiline:true" style="width:250px;height:100px"/></td>
</tr>
</table>
</form>
And finish code with builded dialog_window_config:
dialog_window.dialog(dialog_window_config);
dialog_window.dialog('center');
dialog_window.dialog('open');
My onClose method:
onClose() {
app.current_dialog = false;
app.keypress.activate();
let comboboxes = dialog_window.find('INPUT.easyui-combobox');
if (comboboxes.length > 0) {
comboboxes.combobox('destroy');
}
dialog_window.dialog('destroy');
},
I use hotkey F2 for open dialog and Esc for close.
I think bug happens when I close dialog before EasyUI finish form parsing so combobox do not initialize own options.