ExtJS_extjs のグリッドのいくつかの属性の説明

1. インターフェイスの変更 (CSS スタイル):
Extjs のインターフェイス スタイルは、境界線の色や選択された行の色に至るまで、製品自体のスタイルとは大きく異なります。マウスの移動先やメニューなどはほとんど異なります。これらのスタイルのExtjsの設定はcssで完結します。例:
選択された行の色は次のように設定できます:
.x-grid3-row-selected{background:#c6e2ff! important;}
他も同様ですが、対応するクラスを見つけるだけです。を選択し、変更したい部分を設定するだけです。

2. 属性の役割 (Ext.grid.GroupingView、EditorGridPanel について):
Extjs のグリッドには、並べ替え、列の非表示、列の移動などの強力な機能があります。一部の属性はそれらに対応しており、それらを必要とするかどうかを選択できます。プロパティとその機能の一部は次のとおりです:
*. EditorGridPanel:
border: false, //Grid border
autoHeight: true, // グリッドの高さに指定された高さを使用するかどうか
EnableColumnMove : false, //グリッド列を移動できるかどうか
enableHdMenu: false, //列のヘッダーにドロップダウン メニューがあるかどうか
trackMouseOver: true, //マウスが移動したとき行の上で、行を強調表示するかどうか
stripRows: true, //グリッドの隣接する 2 つの行の背景色を変更します
*。GroupingView:
表示するデータ内でグループ化します。データ ポイントの 1 つに従って、それをグループに表示します。このデータ ポイントは、*.GroupingStore の groupField によって決定されます。 *.GroupingView は、グリッド上に表示されるグループのいくつかの表示プロパティを設定します。例:
forceFit:true, //水平スクロールバーの表示を防ぐためにグリッドの幅に応じて列の幅を調整するかどうか
enableGroupingMenu: false, //グループがあるかどうかを制御しますヘッダー ドロップダウン メニューのオプション (このフィールドでグループ化、グループで表示(チェックボックス))
showGroupName: true,
//グループ化に使用されるデータ ポイントの列のヘッダーを一緒に表示するかどうかグループ名
hideGroupedColumn: true, //データポイントの列を表示するかどうかをグループ化するために使用されます
startCollapsed: false, //最初にグリッドページに入るとき、そのグループが閉じているか展開されているか
scrollOffset: -1, //垂直スクロールバースペースの左 (デフォルトは 19px)

3. セルに画像を追加します:
Ext.grid.ColumnModel 、画像が追加される列に対応し、そのレンダリング リンクを使用して関数が追加されます。例:
var colModel = new Ext.grid.ColumnModel([
{header:”com”, render: AddImgs.createDelegate(this)},
{header:”test”, width:200 , sortable:false}
]);
応答関数は次のとおりです:
AddImgs = function(value,p,record){
if(record.data.descrip != "")
{
p.attr='ext:qtip="プレイリストに追加" style="background-image:url(/imgs/icn_view.gif) !重要; 背景位置: 中央 2ピクセル; 背景リピート: no-repeat ;cursor: pointer;"';
}
}
関数内のrecord.dataはグリッドのデータで、カラーリングは表示する画像のパスと名前です。追加した。

4. 文字の長さが列の幅を超える場合にテキストを折り返す方法:
これらのセルで使用されるクラスの CSS を設定するだけです。 例:
.x-grid3-cell-inner{
white-space:normal;
overflow:visible;
overflow のデフォルト値は非表示であることに注意してください。空白を追加した後、折り返しを使用することはできますが、セルの高さは 1 行の高さのままであるため、データは最初の行以外は表示されません。オーバーフローの値を表示に変更した後でのみ、セルが配置されている行の高さがデータの行数に応じて調整されます。


5. 最初にページに入るとき、最初のグループを除くすべてのグループを展開 (折りたたみ) させ、他のグループは閉じます (折りたたむ): 最初にパス 属性を設定します。 startCollapsed ですべてのグループを閉じます: startCollapsed:true;
次に、store.load({callback: function(records,o,s) {ToggleFirstGroup();} }) で関数を呼び出して、最初のグループを展開します:
//gridView はグリッドによって使用されるビューです (var gv = new Ext.grid.GroupingView({});)。

コードをコピー コードは次のとおりです。

function ToggleFirstGroup(gridView)
{
var grNum = GridView.getGroups().length;
for (var i = 0; i < grNum ; i )
{
var firstGroupID = GridView.getGroups()[i].id;
if(firstGroupID && firstGroupID != "") 🎜 >gridView.toggleGroup(firstGroupID);
break
}
}


6.date 形式: データは 9/24/2008
1) この形式の結果は次のようになります: Web Sep 24 00:00:00 UTC 0800 2008
{
header: dHeader ,
width: 90,
sortable: true,
dateFormat: 'Y-m-d', //dateFormat が 'm/d/Y' の場合、結果は同じになります
dataIndex: 'date'
},
2) この形式の結果は次のようになります: 2008-09-24
{
header: dHeader,
width: 90,
sortable: true ,
renderer: Ext.util.Format.dateRenderer('Y-m-d'), //形式は 'm/d/Y'、結果は「09/24/2008」です
dataIndex: 'date '
},
Class Date とその出力の形式に関するいくつかの説明が見つかりました (http://extjs.com/deploy/ext/docs/output/Date.html):
**** *** *********************
フォーマット出力の説明
------ ---------- - --- --------------------------------------------------- --- --------
d 10 月の日、先行ゼロ付きの 2 桁
D 水 日のテキスト表現、3 文字
j 10 月の日先頭のゼロ
l Wednesday 曜日の完全なテキスト表現
S th 英語の月の序数の接尾辞、2 文字 (j と一緒に使用)
w 3 曜日の数値表現
z 9 ユリウス日、または年間通算日 (0-365)
W 01 ISO-8601 2 桁の年の週番号、月曜日から始まる週 (00-52)
F 1 月 A 完全月のテキスト表現
m 01 先行ゼロ付きの月の数値表現
M Jan 月名の省略形、3 文字
n 1 先行ゼロなしの月の数値表現
t 31 数値指定された月の日数
L 0 閏年かどうか (閏年の場合は 1、そうでない場合は 0)
Y 2007 年の完全な数値表現、4 桁
y 07 A two年の数字表現
a pm 小文字の午前中および後メリディエム
A PM 大文字の午前中および後メリディエム
g 3 先行ゼロなしの時間の 12 時間形式
G 15 24 時間制先行ゼロなしの時間形式
h 03 先行ゼロありの 12 時間形式の時間
H 15 先行ゼロありの 24 時間形式
i 05 先行ゼロありの分
s 01 秒、先行ゼロ付き
O -0600 グリニッジ時間 (GMT) との差 (時間単位)
T CST コードを実行するマシンのタイムゾーン設定
Z -21600 タイムゾーン オフセット (秒単位) (UTC より西の場合は負の値) 、東なら正）
*************************************
以下はいくつかの形式とそれに対応する結果: データはレンダラーを使用して上記と同じです: Ext.util.Format.dateRenderer(format)
"Y-m-d" --> 2008-09-24
"y-m-d" - -> 08-09-24
「F j, Y」 --> 2008 年 9 月 24 日
「F j, y」 --> 2008 年 9 月 24 日
「F j, Y」 、g:i A」 --> 2008 年 9 月 24 日、午前 12 時