2.1.8 ComboBox

Ajaxフレームワーク UI部品リファレンス

目次索引

第2章画面部品

> 2.1 フォーム部品

2.1.8 ComboBox

ComboBoxは、コンボボックスを表示する部品です。コンボボックスは、入力フィールドと選択リストからなる部品です。

表示例
記述形式
プロパティ
スタイルプロパティ
イベントリスナ
JavaScript API
補足事項

検証を実行するValidationHelper、入力制限を行うLimiterなどの機能付加部品を利用することができます。

■表示例

ComboBoxを画面の最下部に配置した場合や、選択リストの高さを設定しないで多数の選択項目を設定した場合など、選択リストを開いたときに画面に収まらないことがあります。
このような場合、ブラウザによってはキー操作でしか選択できなくなるなど操作性が悪くなってしまうため、選択リストが画面内に収まるように部品を配置してください。

■記述形式

<div rcf:type="ComboBox" ... ></div>

子要素は指定できません。

本部品は、前後に改行コードが挿入されて表示されます。

■プロパティ

表の項目の意味は、“表の項目の意味”を参照してください。

名前	データ型	説明	省略	省略値	属性指定	更新	部分更新
list	Array	選択リストに表示する項目の値を指定します。配列の内容はStringです。	可	[]	値、バインド	可	可
buttonImage	Object	選択リストの表示/非表示を操作するボタンのイメージを指定します。詳細は、“buttonImageプロパティの指定形式”を参照してください。	可	標準のイメージ	値	不可	不可

TextInputのプロパティも指定できます。詳細は、“TextInput”の“プロパティ”を参照してください。
部品共通のプロパティも指定できます。詳細は、“画面部品共通プロパティ”を参照してください。

titleプロパティに長い文字列を指定すると、以下のような現象が起こることがあります。

全角30文字(半角60文字)以上の場合、自動的に改行される場合があります。
改行は、全角文字または単語の区切りで行われます。
全角45文字(半角90文字)までが表示され、それ以上の文字は省略されます。

なお、空文字列を指定した場合は、表示されません。

maxLengthプロパティを指定している場合
選択リストの文字列の最大文字数は、maxLengthプロパティの値が上限となります。
autoEscapeを有効に設定している場合
選択項目が確定したときに、TextInputと同様の自動脱出の条件が満たされている場合、自動脱出が行われます。
uppercaseプロパティを有効に設定している場合
選択リストの文字列が英文字の場合、大文字に変換されて表示されます。

buttonImageプロパティの指定形式

buttonImageプロパティを指定する形式について、以下に示します。

{
  base: "URL",
  mouseOver: "URL",
  mouseDown: "URL"
}

プロパティの詳細を以下に示します。

プロパティ名	データ型	説明	省略	省略値
base	String	通常表示されるイメージファイルを指定します。	不可	－
mouseOver	String	マウスカーソルが上にあるとき表示されるイメージファイルを指定します。	可	baseの値
mouseDown	String	マウスがクリックされたときに表示される画像ファイルを指定します。	可	baseの値

それぞれのURLには、クエリ文字列およびURLリライティングで用いるセションIDを付加することができます。詳細は、“ユーザーズガイド”を参照してください。

ボタンのサイズは、幅15ピクセル、高さ18ピクセルです。
スタイルプロパティのwidthプロパティとheightプロパティを変更すると、ボタンのサイズは以下のように変更されます。(単位はピクセル)

幅:width/10 (小数点以下切捨て)
高さ:height-2

■スタイルプロパティ

パーツ名	プレフィックス	クラス名	使用可能なスタイル
部品全体	なし	rcf-ComboBox	サイズボーダー
入力部分	input	rcf-ComboBox-input	カラーフォントテキスト(textIndent、textAlign、whiteSpaceを除く)(注)
選択リスト	list	rcf-ComboBox-list	カラーフォントテキスト(textIndent、textAlign、whiteSpaceを除く) ボーダーサイズのheight
選択項目	item (マウスカーソルがない場合)	rcf-ComboBox-item	ボーダー
選択項目	itemHovered (マウスカーソルがある場合)	rcf-ComboBox-itemHovered	カラー

注)
Firefoxの場合は、wordSpacingも除きます。

詳細は、“スタイルプロパティ”を参照してください。

■イベントリスナ

名前	説明	イベントオブジェクト
onClickButton	ボタン上でマウスがクリックされたときに呼ばれます。	ActionEvent
onDblClickButton	ボタン上でマウスがダブルクリックされたときに呼ばれます。
onMouseOverButton	マウスがボタン上に重ねられたときに呼ばれます。
onMouseOutButton	マウスがボタン上から離されたときに呼ばれます。
onMouseDownButton	ボタン上でマウスが押し下げられたときに呼ばれます。
onMouseUpButton	ボタン上でマウスが離されたときに呼ばれます。
onMouseMoveButton	マウスがボタン上で動かされたときに呼ばれます。
onMouseOverList	マウスが選択リスト上に重ねられたときに呼ばれます。
onMouseOutList	マウスが選択リスト上から離されたときに呼ばれます。
onMouseDownList	選択リスト上でマウスが押し下げられたときに呼ばれます。
onMouseMoveList	マウスが選択リスト上で動かされたときに呼ばれます。

本部品の入力フィールドのイベントとして、TextInputと同じイベントリスナを使用します。詳細は、“TextInput”の“イベントリスナ”を参照してください。
部品共通のイベントリスナもあります。詳細は、“画面部品共通イベントリスナ”を参照してください。

onValueChangeについて
valuechangeイベントは、選択リストから値を選択したときに、これまで入力されていた値と異なる場合に発生します。入力されている値と同じ値を選択した場合、valuechangeイベントは発生しません。
選択リストおよびボタンをクリックした場合のイベントとフォーカスについて
マウスで選択リスト(Internet Explorerの場合)またはボタン(Internet ExplorerおよびFirefoxの場合)をクリックした場合、いったん、入力フィールドからフォーカスが外れ、再度、自動的に入力フィールドにフォーカスが戻されます。このとき、onBlurおよびonFocusのイベントが発生し、値が変更されている場合にはchangeイベントもあわせて発生します。
また、上記のほかにpropertychange、valuechange、mousedownbutton、mousedownlistも、同じタイミングで発生する場合があります。これらのイベントに対するイベントリスナの中では、フォーカス移動処理を行わないでください。前述の入力フィールドにフォーカスを戻す処理との競合により、意図したフォーカス移動が行われない場合があります。

■JavaScript API

固有のJavaScript APIはありません。部品共通のJavaScript APIは、“画面部品共通JavaScript API”を参照してください。

■補足事項

ComboBoxのサイズについて
部品全体および選択リストの高さ(height)と幅(width)の単位は、“px”にだけ対応しています。そのほかの単位による指定をした場合、表示が崩れる可能性があります。

選択リストからの値の選択
マウスでボタンをクリックして選択リストを開いた場合、そのままマウスをドラッグして選択リスト上で離しても選択操作は行われません。選択リストから値を選択するには、選択したい値の上で、再度マウスをクリックしてください。

目次索引