2.3.10 ViewColumnImage

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

目次索引

第2章画面部品

> 2.3 テーブル部品

2.3.10 ViewColumnImage

ViewColumnImageは、DataGridのテーブルで指定した列に画像ファイルを配置する部品です。

記述形式
プロパティ
スタイルプロパティ
イベントリスナ
JavaScript API

ViewColumnImageは、Internet Explorerでだけ利用可能な部品です。

■記述形式

<div rcf:id="model1" rcf:type="Model" rcf:object="modelData"></div>
<div rcf:type="DataGrid" rcf:data="{model1.data}">
    ...
    <div rcf:type="ViewColumnImage" rcf:name="img1" rcf:propertyName="img" rcf:label="イメージ"></div>
    ...
</div>

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

■プロパティ

表の項目の意味は、“Text”の“プロパティ”を参照してください。

名前	データ型	説明	省略	省略値	属性指定	更新	部分更新
name	String	カラムの名前を指定します。 DataGridにあるViewColumnGrid、ViewColumnCheck、ViewColumnTree、ViewColumnSelect、ViewColumnImage内で、一意の値を指定してください。一意でない値を指定した場合、エラーになります。	不可	－	値	不可	不可
propertyName	String	モデルに指定した配列データに含まれるオブジェクトの持つプロパティのうち、表示画像のURLが指定されているプロパティ名を指定します。 URLには、クエリ文字列およびURLリライティングで用いるセションIDを付加することができます。詳細は、“ユーザーズガイド”を参照してください。セル単位で画像を非表示にする場合は、該当オブジェクトにnullを指定します。	可	－	バインド	可	可
label	String	列ヘッダ部に表示する文字列を指定します。	可	nameプロパティの値	値	不可	不可
fixedImageSize	Object	配置する画像ファイルのサイズ(高さ、幅)を指定します。単位はピクセルです。同一のViewColumnImage内でサイズ(高さ、幅)が異なる画像ファイルを表示する場合は、画像ファイルは同じサイズ(高さ、幅)にしてください。画像ファイルが指定サイズと異なる場合は、指定サイズに拡大・縮小されます。(注1) オブジェクトの指定方法は“fixedImageSizeプロパティの指定方法”を参照してください。	可	指定した画像ファイルのサイズ	値	不可	不可
focusable(注2)	Boolean	セルのフォーカスを可能にするかどうかを指定します。 true: フォーカス可 false: フォーカス不可	可	true	値	不可	不可
selectable(注2)	Boolean	セルの選択を可能にするかどうかを指定します。 true: その列のセルが選択可能 false: その列のセルが選択不可	可	true	値	不可	不可

注1) fixedImageSizeプロパティを指定した場合、ViewColumnImage内で表示する画像は強制的に指定したサイズに拡大・縮小されるため、画像の見映えが異なる場合があります。

注2) DataGridのfocusModeプロパティが0または1の場合にだけ、設定が有効となります。

配置列に対して、編集はできません。
配置列に対して、ソートはできません。

ViewColumnGridのプロパティも指定できます。詳細は、“ViewColumnGrid”の“プロパティ”を参照してください。

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

ViewColumnImageの指定方法

以下に例を示します。

...
<script type="text/javascript">
//<![CDATA[
  var modelData = {
    scores: [
      { id: 'ID0001',  img: 'http://xxx/xxx/img/xxx.gif', score: 90 },
      { id: 'ID0002',  img: null,                    score: 80 },
      { id: 'ID0003',  img: 'http://xxx/xxx/img/xxx.gif',  score: 100 }
    ]
  }
//]]>
</script>
...
<div rcf:id="model1" rcf:type="Model" rcf:object="modelData"></div>
<div rcf:type="DataGrid" rcf:data="{model1.scores}">
    <div rcf:type="ViewColumnGrid" rcf:name="column1" rcf:propertyName="id" rcf:label="ID"></div>
    <div rcf:type="ViewColumnImage" rcf:name="img1" rcf:propertyName="img" rcf:label="イメージ"></div>
    <div rcf:type="ViewColumnGrid" rcf:name="column2" rcf:propertyName="score" rcf:label="スコア">
      <div rcf:type="NumberInput"></div>
    </div>
</div>
...

上記の指定を行った場合の画像の表示は、以下のようになります。

fixedImageSizeプロパティの指定方法

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

heightおよびwidthは、それぞれ数値で指定してください。(単位はピクセル)

{
    height:  25,    //画像の表示サイズ(高さ)
    width:   20     //画像の表示サイズ(幅)
}

heightまたはwidthだけの指定も可能です。省略した場合は、指定した画像ファイルのサイズで表示されます。

■スタイルプロパティ

ViewColumnGridのスタイルプロパティと同様です。“ViewColumnGrid”の“スタイルプロパティ”を参照してください。

■イベントリスナ

固有のイベントリスナはありません。部品共通のイベントリスナは、“画面部品共通イベントリスナ”を参照してください。

■JavaScript API

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

目次索引