問題の概要

doradoを使用してダイアログ内に複数選択可能なドロップダウンを作成した際、選択した値をJavaScriptからAutoFormElementに反映させると、値が一瞬表示された後に消えてしまう現象が発生しました。

通常の画面では問題なく値を設定できていた以下のコード：

view.get("#fjext").set("value", labelStr);

が、ダイアログ内では正常に動作しませんでした。

解決方法

この問題は、ダイアログ内でデータバインディングが正しく更新されないことが原因でした。最終的にdataSetを介してデータを更新することで解決しました。

修正後のコード

以下のコードに変更することで、値が正しく保持されるようになりました：

var data = view.get("#KcsbszDS").getData("#");
data.set("fjext", labelStr);

関連するフロントエンド構成

AutoFormとCustomDropDownの定義：

<AutoForm id="autoformId">
    <Property name="dataSet">KcsbszDS</Property>
    <Property name="cols">*</Property>
    <Property name="labelWidth">100</Property>
</AutoForm>

<AutoFormElement id="fjext">
    <Property name="name">fjext</Property>
    <Property name="property">fjext</Property>
    <Property name="trigger">fileTypesDropDown</Property>
    <Property name="editable">false</Property>
    <Editor/>
</AutoFormElement>

<CustomDropDown id="fileTypesDropDown">
    <Container>
        <Grid id="fileTypesGrid">
            <Property name="selectionMode">multiRows</Property>
            <RowSelectorColumn/>
            <DataColumn>
                <Property name="readOnly">true</Property>
                <Property name="caption">よく使うファイル形式</Property>
                <Property name="name">value</Property>
                <Property name="property">value</Property>
                <Editor/>
            </DataColumn>
        </Grid>
        <Container>
            <Button id="fileTypeSubBtn">
                <Property name="caption">決定</Property>
            </Button>
        </Container>
    </Container>
</CustomDropDown>

イベントハンドラの例

グリッドの初期化と選択確定時の処理：

// @Bind #fileTypesGrid.onCreate
!function(self, arg) {
    var dataItems = [
        { key: 0, value: "doc" },
        { key: 1, value: "docx" },
        { key: 2, value: "zip" },
        { key: 3, value: "rar" },
        { key: 4, value: "pdf" }
    ];
    self.set("items", dataItems);
}

// @Bind #fileTypeSubBtn.onClick
!function (self, arg) {
    var grid = view.get("#fileTypesGrid");
    var selected = grid.get("selection");
    var result = "";
    var index = 0;
    selected.each(function(item) {
        if (index++ < selected.length - 1) {
            result += item.value + ",";
        } else {
            result += item.value;
        }
    });
    view.get("#fileTypesDropDown").close();
    
    var dataset = view.get("#KcsbszDS").getData("#");
    dataset.set("fjext", result);
}