RadPHP XEでListViewやDBGridの行に色やフォントを設定する方法を紹介します。
ListViewやDBGridの行に色やフォントを設定するには、qx.ui.table.DefaultDataRowRendererを使用します。
var renderer = new qx.ui.table.DefaultDataRowRenderer();
行の色情報を設定するには、setRowColors()メソッドを使用します。
var rowColors1 = { //行の色設定
colNormal:'blue', //標準の文字色
colSelected: 'red', //選択行の文字色
bgcolEven: '#FFC6E2', //奇数行の背景色
bgcolOdd: '#E2FFc6', //偶数行の背景色
bgcolFocusedSelected: '#000000', //行にフォーカスあり グリッドにフォーカスあり 行選択
bgcolFocusedSelectedBlur: '#555555', //行にフォーカスあり グリッドにフォーカスなし 行選択
bgcolFocused: '#FFFFFF', //行にフォーカスあり グリッドにフォーカスあり 行未選択
bgcolFocusedBlur: '#000000', //行にフォーカスあり グリッドにフォーカスなし 行未選択
bgcolSelected: '#00FF00', //行にフォーカスなし グリッドにフォーカスあり 行選択
bgcolSelectedBlur: '#009900', //行にフォーカスなし グリッドにフォーカスなし 行選択
};
renderer.setRowColors(rowColors1);
フォント名を設定するには、setFontFamilyメソッドを使用します。
renderer.setFontFamily("'MS 明朝', 'sans-serif'"); //フォント名
フォントサイズを設定するには、setFontSize()メソッドを使用します。
renderer.setFontSize('14px'); //フォントサイズ
DefaultDataRowRendererの設定ができたら、ListViewのsetDataRowRendererメソッドで登録します。
ListView1.setDataRowRenderer(renderer);
次のコードはListView(ListView1)の行に色を設定するコードです。
フォームにListViewを配置します。
フォームのEncodingを「Unicode (UTF-8)」にします。
ListViewのColumnsプロパティを設定します。
製品名
配布形態
金額
フォームのJavaScriptのOnLoadイベントに以下のコードを記述します。
function Unit1JSLoad($sender, $params)
{
?>
//begin js
//行データの登録
var rowData = [['RAD Studio XE Professional (ライセンス+メディア)', 'DVD', 168000],
['RAD Studio XE Professional ESD バージョンアップ (ライセンスのみ)', 'ESD(ライセンスのみ)', 84000],
['Delphi XE Professional (ライセンス+メディア)', 'DVD', 98000],
['Delphi XE Professional ESD バージョンアップ (ライセンスのみ)', 'ESD(ライセンスのみ)', 52000],
['Delphi XE Starter ESD(ライセンスのみ) アップグレード版', 'ESD(ライセンスのみ', 14000],
['C++Builder XE Professional (ライセンス+メディア)', 'DVD', 98000],
['C++Builder XE Professional ESD バージョンアップ (ライセンスのみ)', 'ESD(ライセンスのみ)', 52000],
['C++Builder XE Starter ESD(ライセンスのみ) アップグレード版', 'ESD(ライセンスのみ)', 14000],
['RadPHP XE (ライセンス+メディア)', 'DVD', 36000],
['RadPHP XE ESD (ライセンスのみ) バージョンアップ', 'ESD(ライセンスのみ)', 20000]];
ListView1.getTableModel().addRows(rowData);
//列幅の調整
var tcm = ListView1.getTableColumnModel();
tcm.setColumnWidth(0, 300);
tcm.setColumnWidth(1, 140);
tcm.setColumnWidth(2, 100);
//行の色の設定
var renderer = new qx.ui.table.DefaultDataRowRenderer();
var rowColors1 = { //行の色設定
colNormal:'blue', //標準の文字色
colSelected: 'red', //選択行の文字色
bgcolEven: '#FFC6E2', //奇数行の背景色
bgcolOdd: '#E2FFc6', //偶数行の背景色
bgcolFocusedSelected: '#000000', //行にフォーカスあり グリッドにフォーカスあり 行選択
bgcolFocusedSelectedBlur: '#555555', //行にフォーカスあり グリッドにフォーカスなし 行選択
bgcolFocused: '#FFFFFF', //行にフォーカスあり グリッドにフォーカスあり 行未選択
bgcolFocusedBlur: '#000000', //行にフォーカスあり グリッドにフォーカスなし 行未選択
bgcolSelected: '#00FF00', //行にフォーカスなし グリッドにフォーカスあり 行選択
bgcolSelectedBlur: '#009900', //行にフォーカスなし グリッドにフォーカスなし 行選択
};
renderer.setRowColors(rowColors1);
renderer.setFontFamily("'MS 明朝', 'sans-serif'"); //フォント名
renderer.setFontSize('14px'); //フォントサイズ
ListView1.setRowHeight(20); //行の高さ
ListView1.setDataRowRenderer(renderer);
//end
<?php
}
【送料無料】PHPで初めてドラッグ&ドロップ開発を実現した革新的なWeb開発環境RadPHP XE ESD … |
我使用 memo 寫入 table A 欄位 X :
1.a
2.b
3.c
dbgrid 設定 setRowHeight (80 )讀取出來變成
1.a 2.b 3.c
請問如何顯示
1.a
2.b
3.c
謝謝