Extjs4 GridPanel_extjs の主な構成パラメータの詳細な紹介

1. Ext.grid.GridPanel
主な構成項目:
ストア: テーブル データ セット
列: ColumnModel 列モードを自動的に作成できるテーブル列モードの構成配列
autoExpandColumn: テーブルの未使用スペースを自動的に埋める列。パラメータは列 ID であり、0 にすることはできません。
stripRows: テーブルの色を 1 行おきに変更するかどうか。デフォルトは false
cm、colModel:テーブルをレンダリングするときのテーブルの列モード この構成項目は設定する必要があります
sm, selModel: テーブルの選択モード、デフォルトは Ext.grid.RowSelectionModel です
enableHdMenu: コンテキスト メニューを表示するかどうかテーブルヘッダーの値、デフォルトは true
enableColumnHide: タイトルの受け渡しを許可するかどうか コンテキスト メニューは列を非表示にします、デフォルトは true
loadMask: データのロード時にマスク効果を表示するかどうか、デフォルトは false
view: テーブル ビュー、デフォルトは Ext.grid.GridView です。
viewConfig: テーブル ビュー設定オブジェクト
autoExpandMax: 自動的に拡張される列の最大幅、デフォルトは 1000
autoExpandMin: 最小幅自動展開される列の数、デフォルトは 50
columnLines: 列分割線を表示するかどうか、デフォルトは false
disableSelection: 行選択を無効にするかどうか、デフォルトは false
enableColumnMove: ドラッグとドラッグを許可するかどうか列の削除、デフォルトは true
enableColumnResize: 列幅の変更を許可するかどうか、デフォルトは true
hideHeaders: テーブルのヘッダーを非表示にするかどうか、デフォルトは false
maxHeight: 最大高さ
minColumnWidth:最小列幅、デフォルトは 25
trackMouseOver: マウスが置かれている行を強調表示するかどうか、デフォルトは true
主なメソッド:
getColumnModel(): 列モードの取得
getSelectionModel():選択モードを取得します
getStore(): データセットを取得します
getView(): ビューオブジェクトを取得します
reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel ): テーブルコンポーネントを再構成します新しいデータセットと列モードを使用

2, Ext.grid.Column
主な設定項目:
id: 列 ID
Header: ヘッダー テキスト
dataIndex: データ セット内の列とデータ レコード間の対応関係を設定します。値はデータ レコード内のフィールド名です。この項目が設定されていない場合、列インデックスはデータ レコード内のフィールドのインデックスに対応するために使用されます。
width: 列の幅
align: 列データの配置
hidden: 列データを非表示にするかどうか
fixed: 列の幅を固定するかどうか、デフォルトは false
menuDisabled: 列のコンテキスト メニューを無効にするかどうか、デフォルトは false
resizable: 列の変更を許可するかどうかwidth、デフォルトは true
sortable: 並べ替えを許可するかどうか、デフォルトは false true
renderer: 列のカスタム セル レンダリング関数を設定します
関数に渡されるパラメーターは次のとおりです:
value : データの元の値
metadata: セルと属性のスタイルを設定するために使用されるメタデータ オブジェクト。 このオブジェクトに含まれる属性は次のとおりです。
css: セルの TD 要素に適用されるスタイル名
attr: HTML 属性定義文字列 (「style="color:blue"」など)
Record: 現在のデータ レコード オブジェクト
rowIndex: セルの行インデックス
colIndex: セルの列インデックス
store: データセットオブジェクト
xtype: 列レンダラタイプ、デフォルトはgridcolumn、その他も可能 オプションにはbooleancolumn、numbercolumn、datecolumn、templatecolumnなどが含まれます。
editable: 編集可能かどうか、デフォルトはtrueです
editor: editor
groupName:
emptyGroupText:
groupable:

3. Ext.grid.ColumnModel
主な構成項目:
columns: フィールド配列
defaultSortable: デフォルトの並べ替えを実行するかどうか、デフォルトは false
defaultWidth: デフォルトの幅
メインメソッド:
findColumnIndex(Stringcol): 指定された dataIndex に基づいて列インデックスを検索します
getColumnById(String id): 指定された ID に対応する列を取得します
getColumnCount(BooleanvisibleOnly): 列の総数を取得します
getColumnHeader(Number col): 列のヘッダーを取得します
getColumnId(Number Index): 列 ID を取得します
getDataIndex(Number Col): 列に対応するデータ フィールド名を取得します
getIndexById(String id): 列インデックスを取得します
getTotalWidth( Boolean includeHidden )
isCellEditable( NumbercolIndex, Number rowIndex )
isFixed()
isHidden( NumbercolIndex )
setColumnHeader( Numbercol, Number header )
setColumnWidth ( Numbercol, Number width, Boolean stopEvent )
setDataIndex( Numbercol, String dataIndex )
setEditable( Numbercol, Boolean editable )
setEditor( Numbercol, Object editor )
setHidden( NumbercolIndex , Boolean hidden )
setRenderer( Numbercol, Function fn )

4. Ext.grid.AbstractSelectionModel
メインメソッド:
lock(): 選択領域をロック
unlock(): 選択領域のロックを解除
isLocked(): 現在の選択領域がロックされているかどうか

5. Ext.grid.CellSelectionModel
メイン メソッド:
clearSelections(BooleanPreventNotify):選択領域
getSelectedCell(): 現在選択されているセルを取得し、配列を返します。その形式: [rowIndex,colIndex]
hasSelection(): 現在選択領域があるかどうか
select(Number rowIndex, Number ColIndex, [BooleanPreventViewNotify], [BooleanPreventFocus], [Ext.data.Record r] ): 指定したセルを選択

6, Ext.grid.RowSelectionModel
メイン設定項目:
singleSelect: 単一選択モードを選択するかどうか、デフォルトは false、つまり複数のデータを選択できます
主なメソッド:
clearSelections([Boolean fast]): すべての選択領域をクリアします
deselectRange(Number startRow, Number endRow): 範囲内の行選択を解除
deselectRow(Number row, [BooleanPreventViewNotify]): 指定行の選択状態を解除
each( Function fn, [Objectスコープ] ): 選択されたすべての行をスキャンし、指定された関数を呼び出します。現在選択されている行がこの関数に渡されます。
getCount(): 選択された行の合計数を取得します。
getSelected(): 最初に選択されたレコードを取得します。
getSelections(): 選択されたすべてのレコードの配列を取得します。
hasNext(): 現在選択されている行の後に選択できるレコードがあるかどうかを判断します
hasPrevious(): 現在選択されている行の前に選択できるレコードがあるかどうかを判断します
hasSelection(): かどうかデータが選択されています
isIdSelected(String id): 指定された ID を持つレコードが選択されているかどうかを判断します
isSelected(Number/Record Index): 指定されたレコードまたはレコード インデックスのデータが選択されているかどうかを判断します
selectAll(): すべての行を選択
selectFirstRow(): 最初の行を選択
selectLastRow([Boolean keepExisting]): 最後の行を選択
keepExisting: 既存の選択を保持するかどうか
selectNext( [Boolean keepExisting]): 現在選択されている行を選択します 次の行
selectPrevious([Boolean keepExisting]): 現在選択されている行の前の行を選択します
selectRange(Number startRow, Number endRow, [Boolean keepExisting]):範囲内のすべての行を選択します
selectRecords(Array records , [Boolean keepExisting] ): 指定されたレコードのセットを選択します
selectRow( Number row, [Boolean keepExisting], [BooleanPreventViewNotify] ): 行を選択します
row: 行インデックス
selectRows( Array rows, [Boolean keepExisting] ): 複数の行を選択
rows: 行インデックス配列

7. Ext.grid.CheckboxSelectionModel
主な設定項目:
singleSelect: 単一選択モードを選択するかどうか、デフォルトは false、つまり複数のデータを選択できます
checkOnly: チェックボックス列をクリックすることによってのみ選択するかどうか、デフォルトは false です。
sortable: チェックボックス列のソートを許可するかどうか、デフォルトは false
width: チェックボックス列の幅、デフォルトは 20

8、Ext.grid。 RowNumberer
主な設定項目:
header: 行番号リストのヘッダーに表示される内容
width: 列幅、デフォルトは 23

9。 GridView
主な設定項目：
enableRowBody：行本文を含めるかどうか
sortAscText：表タイトルメニューの昇順 文字説明
sortDescText：表タイトルメニューの降順の文字説明
columnsText: テーブル タイトル メニューの列に対応するテキストの説明
autoFill: テーブル全体を満たすように列を自動的に拡張するかどうか、デフォルトは false
ForceFit: テーブルの列幅を強制的に調整するかどうか水平スクロール バーが表示されないようにテーブル全体の幅に合わせます。デフォルトは false です。
メイン メソッド:
focusCell(Number row, Numbercol): 指定したセルにフォーカスを移動します。
focusRow(Number row) ): 指定した行にフォーカスを移動
getCell(Number row, Number col): 指定したセルに対応する td 要素を取得
getHeaderCell(Number Index): 指定したヘッダーに対応する td 要素を取得
getRow(Number Index): 指定した行に対応する tr 要素を取得します
getRowClass(Record Record, Number Index, Object rowParams, Store Store): テーブルに付加されたスタイル名を取得します row
record: 現在の行データ レコード オブジェクト
index: 現在の行のインデックス
rowParams: レンダリング時に行テンプレートに渡される構成オブジェクト。これを通じて行本体のスタイルをカスタマイズできます。 このオブジェクトは、enableRowBody の場合にのみ有効です。可能な属性は次のとおりです:
body: 行本体にレンダリングされる HTML コード フラグメント
bodyStyle: 行本体 tr 要素の style 属性に適用される文字列
cols: Colspan 属性に適用される値行本体の td 要素の列の合計数がデフォルトです。
store: テーブル データ セット
refresh( [Boolean headersToo] ): テーブル コンポーネントを更新します。
scrollToTop(): テーブルをスクロールします。 top

実際の戦闘 1:
グリッドパネルのスクロール バーを最後のレコードまで自動的にスクロールさせます (データを動的に挿入します):
grid.getView().focusRow(vehiclePassInfoGrid.getStore().getCount( )-1);

2: グリッドパネルで選択された行のステータスをクリアします:
grid.getSelectionModel().clearSelections();