いいね!数

0

閲覧数
269

dojoのダイアログを使って5千件ほどのデータを表示させています。

var dialog = dijit.byId("#{id:selectCategory2}");
dialog.show();

ダイアログを表示させるボタンのついているフォーム内にダイアログの領域があるのですが、

文書を表示させたり、編集モードに変更したりする度に値が更新されるのか、全体の動作が

遅くなります。

表示させるダイアログの値は以下の通りです。

var v :NotesView =database.getView("SelCompanyW_V");
var doc:NotesDocument = v.getFirstDocument();
KeyList = [];
while (doc != null){
    makr_str2 = doc.getItemValueString("CompanyName");
    makr_str = doc.getItemValueString("CompanyNameKana");
    makr_str3 = doc.getItemValueString("CompanyAddress");
    KeyList.push(makr_str+"◆"+makr_str2+"("+makr_str3+")");
var doc=v.getNextDocument(doc);  
}
return KeyList;

シンプルビューを表示させるようにしてみましたが、使い勝手もよくなく、UIもいまいちでした。

繰り返しコントロールを使った方法も同様です。

そこで、このダイアログの値を更新するのは、ボタンをクリックしてダイアログが表示されるときだけに

したいのですが、それは可能でしょうか?

可能だとしたらどのような方法があるでしょうか?

サーバー情報: | クライアント情報: | 
カテゴリ:アプリ開発 - XPages | タグ:
  | 質問日時:2017/05/24 10:29:35

回答・コメント

いいね!数

0

dialogコントロールの afterContentLoad イベント内に記述するとどうでしょうか?

回答日時:2017/05/24 10:48:24

いいね!数

0

Kazu Tatsukiさん、

早々のご回答をありがとうございます。

今回はエクステンションライブラリーのDialogを使わず、パネルを使ってダイアログを作っているため、

afterContentLoad イベントがありません。エクステンションライブラリーのDialogを使ったほうが良いでしょうか?

あるいは他に方法はありますでしょうか?

 

<xp:panel id="selectCategory2" dojoType="dijit.Dialog" style="background-color:rgb(255,255,255)" title="キーワードの選択">
        キーワード
        <xp:br></xp:br>
        <xp:br></xp:br>
        <xp:listBox id="categoryDoc2" style="height:191.0px;width:581.0px;background-color:rgb(247,247,247)">


            <xp:selectItems>
                <xp:this.value><![CDATA[#{javascript:var v :NotesView =database.getView("SelCompanyW_V");
var doc:NotesDocument = v.getFirstDocument();
KeyList = [];
while (doc != null){
    makr_str2 = doc.getItemValueString("CompanyName");
    makr_str = doc.getItemValueString("CompanyNameKana");
    makr_str3 = doc.getItemValueString("CompanyAddress");
    KeyList.push(makr_str+"◆"+makr_str2+"("+makr_str3+")");
var doc=v.getNextDocument(doc);  
}
return KeyList;}]]></xp:this.value>
            </xp:selectItems>

        </xp:listBox>
        <xp:br></xp:br>

        <xp:br></xp:br>
        <xp:button value="OK" id="button4">
            <xp:eventHandler event="onclick" submit="true" refreshMode="partial" disableValidators="true" refreshId="CP">
                <xp:this.script><![CDATA[var selected = dojo.byId("#{id:categoryDoc2}");
var input = dojo.byId("#{id:CompanyName}");
var input2 = dojo.byId("#{id:CompanyNameKana}");
var input3 = dojo.byId("#{id:CompanyAddress}");
var str=selected.value;
var str_num = str.indexOf('◆');
var str_num2 = str.indexOf('(');
var str_numall=str.length;
//var str_bknum = str.lastIndexOf("◆");
var strName=str.slice(0,str_num);
var strKana = str.slice(str_num+1,str_num2);
var strAddre = str.slice(str_num2+1,str_numall-1);
input.value = strName;
input2.value = strKana;
input3.value = strAddre;
var dialog = dijit.byId("#{id:selectCategory2}");
dialog.hide();]]></xp:this.script>
            </xp:eventHandler>
        </xp:button>
        <xp:button value="キャンセル" id="button5">
            <xp:eventHandler event="onclick" submit="false">
                <xp:this.script><![CDATA[var dialog = dijit.byId("#{id:selectCategory2}");
dialog.hide();

]]></xp:this.script>
            </xp:eventHandler>
        </xp:button>
        <xp:br></xp:br>
        <xp:eventHandler event="onClientLoad" submit="true" refreshMode="norefresh">
        </xp:eventHandler>
    </xp:panel>

回答日時:2017/05/24 11:29:14

いいね!数

0

特にエクステンションライブラリーのDialogを使えない理由が他にない場合は試す価値はあると思いますが、どうしても使えない場合、renderedプロパティを駆使して実装することも可能かと思います。

renderedがfalseの間は中のコードは実行されない特性を利用したやり方です。

以下、こんな感じになるかなというコードを書いてみました。書いただけで検証していません(汗

	<xp:panel id="selectCategoryArea">
		<xp:panel id="selectCategory2" dojoType="dijit.Dialog" rendered="#{javascript:viewScope.showDialog}"
			style="background-color:rgb(255,255,255)" title="キーワードの選択" >
			hoge
		</xp:panel>
	</xp:panel>
	<xp:button value="Label" id="button1">
		<xp:eventHandler event="onclick" submit="true"
			refreshMode="partial" refreshId="selectCategoryArea" disableValidators="true">
			<xp:this.action><![CDATA[#{javascript:viewScope.showDialog = false;
var selectCategory2 = getClientId("selectCategory2");
view.postScript("dijit.byId(\""+selectCategory2+"\").show();");}]]></xp:this.action>
		</xp:eventHandler>
	</xp:button>

viewScope.showDialog でpanelの表示非表示を制御しておき、ボタンのonClickイベント(SSJS)で表示するようにviewScopeの値を更新、その後postScriptを使って無理やりCSJSを実行。

とここまで書いてみましたが不格好なのでやはりエクステンションライブラリーのDialogを使えるといいですね(笑)

回答日時:2017/05/24 12:16:49

いいね!数

0

すみません、上の回答のコードだと全く動きませんでした。

こちらに動作確認が取れたコードになります。部分更新用にPanelを入れ子にしないといけなくなっていますが、view.postScriptを使わずに済んだり少しすっきりしています。

 


 
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
	<xe:dialog id="dialog1"></xe:dialog>
	<xp:this.beforePageLoad><![CDATA[#{javascript:viewScope.showDialog = false;}]]></xp:this.beforePageLoad>
	<xp:panel id="selectCategory2" dojoType="dijit.Dialog"
		style="background-color:rgb(255,255,255)" title="キーワードの選択">
		<xp:panel id="panelForPartialRefresh">
			<xp:panel id="panelDefaultHiddden" rendered="#{javascript:viewScope.showDialog}">
				ここのコンテンツはボタン押下後に読み込まれます
			</xp:panel>
		</xp:panel>
	</xp:panel>
	<xp:button value="Label" id="button1">
		<xp:eventHandler event="onclick" submit="true"
			refreshMode="partial" refreshId="panelForPartialRefresh">
			<xp:this.action><![CDATA[#{javascript:viewScope.showDialog = true;}]]></xp:this.action>
			<xp:this.script><![CDATA[var dialog = dijit.byId("#{id:selectCategory2}");
dialog.show();]]></xp:this.script>
		</xp:eventHandler>
	</xp:button>
</xp:view>
回答日時:2017/05/24 12:46:00

いいね!数

0

Kazu Tatuskiさん、

ご親切な回答をありがとうざいます。助かります。

頂いたコードで試したところ、ボタン押下でダイアログを表示すると表示されるまでにかなり

時間がかかるようになりました。

その代り、その他の動作は早くなりました。

ユーザーと相談して今回の方法を含めて検討したいと思います。

回答日時:2017/05/25 16:03:19