Ext.gridのプロパティとメソッド

1. Ext.grid.GridPanel（エクスト・グリッド・グライドパネル



主な設定項目です。



store: テーブルのデータセット



columns: テーブルのカラムスキーマの設定配列で、自動的に ColumnModel のカラムスキーマを作成します。



autoExpandColumn: パラメータはカラムIDで、IDは0にはできません。



stripeRows: テーブルが行の間で色を変えるかどうか、デフォルトはfalse



cm, colModel: テーブルのカラムモード、この設定項目はテーブルをレンダリングするときに設定しなければなりません。



sm, selModel: テーブルの選択モード、デフォルトはExt.grid.Selectです。



enableHdMenu: テーブルヘッダのコンテキストメニューを表示するかどうか、デフォルトはtrueです。



enableColumnHide: ヘッダーのコンテキストメニューからカラムを隠すことを許可するかどうか、デフォルトはtrue



loadMask: データ読み込み時にマスク効果を表示するかどうか、デフォルトはfalse



view: グリッドビュー、デフォルトはExt.grid.viewです。



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: カラムを隠すかどうか、デフォルトはfalse



fixed: カラム幅を固定するかどうか、デフォルトはfalse



menuDisabled: カラムのコンテキストメニューを無効にするかどうか、デフォルトは false です。



resizable: カラムの幅を変更できるかどうか。



sortable: 並べ替えを行うかどうか、デフォルトは true。



renderer: 列のカスタムセルレンダリング関数を設定します。



この関数に渡されるパラメータは以下の通りです。



value: データの元の値



metadata: メタデータオブジェクト、セルのスタイルとプロパティを設定するために使用され、オブジェクトは、次のプロパティを含んでいます。



css: セルのTD要素に適用されるスタイル名



attr: HTML属性定義文字列、例: 'style="color:blue"'



record: 現在のデータレコード・オブジェクト



rowIndex: セルの行インデックス



colIndex: セルの列インデックス



store: データセットオブジェクト



デフォルトは gridcolumn で、その他のオプション値は booleancolumn、numbercolumn、datecolumn、templatecolumn など。



editable: 編集可能かどうか、デフォルトはtrue。



editor: エディタ



グループ名



emptyGroupTextを指定します。



をグループ化することができます。

3. Ext.grid.ColumnModel（エクスト.グリッド.カラムモデル



主な設定項目です。



columns: フィールドの配列



defaultSortable: デフォルトでソートするかどうか、デフォルトはfalseです。



defaultWidth: デフォルトの幅



主なメソッド



findColumnIndex( String col ): 与えられた dataIndex に基づいて、カラムインデックスを検索します。



getColumnById( String id ): 指定されたidに対応するカラムを取得する。



getColumnCount( Boolean visibleOnly ): カラムの総数を取得します。



getColumnHeader( Number col ): カラムヘッダを取得する。



getColumnId( Number index ): カラムIDを取得する。



getDataIndex( Number col ): カラムに対応するデータフィールドの名前を取得します。



getIndexById( String id ): カラムのインデックスを取得します。



getTotalWidth( Boolean includeHidden )



isCellEditable( 数値 colIndex, 数値 rowIndex )



isFixed()



isHidden( 数値 colIndex )



setColumnHeader( Number col, String header )



setColumnWidth( Number col, Number width, Boolean suppressEvent )



setDataIndex( Number col, String dataIndex )



setEditable( Number col, Boolean editable )



setEditor( Number col, オブジェクトエディタ )



setHidden( Number colIndex, Boolean hidden )



setRenderer( Number col, Function fn )

4. Ext.grid.AbstractSelectionModel



主なメソッド



lock()：選択領域をロックする



unlock()：選択領域のロックを解除します。



isLocked()：現在の選択領域がロックされているかどうか

5. 5.Ext.grid.CellSelectionModel（エクスト・グリッド・セルセレクションモデル



主なメソッド



clearSelections( Boolean preventNotify ): 選択項目をクリアします。



getSelectedCell()。現在選択されているセルを取得し、その配列を返します。[rowIndex, colIndex] の形式で配列を返す。



hasSelection()：現在選択されている領域があるかどうか



select( Number rowIndex, Number colIndex, [Boolean preventViewNotify], [Boolean preventFocus], [Ext.data.Record r] ): 指定されたセルを選択する。

6. Ext.grid.RowSelectionModel



主な設定項目です。



singleSelect: 単一選択モードかどうか、デフォルトはfalse、つまり複数のデータを選択することができる



主なメソッド



clearSelections( [Boolean fast] ): すべての選択部分を消去します。



deselectRange( Number startRow, Number endRow ): 範囲内の行の選択を解除する。



deselectRow( Number row, [Boolean preventViewNotify] ): 指定した行を非選択にします。



each( Function fn, [Object scope] ): 選択されたすべての行を反復し、指定された関数を呼び出します。現在選択されている行は、この関数に渡されます。



getCount()：選択された行の総数を取得します。



getSelected()：最初に選択されたレコードを取得します。



選択されたすべてのレコードの配列を取得します。



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], [Boolean preventViewNotify] ): 行を選択する。



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. Ext.grid.GridView



主な設定項目です。



enableRowBody: 行の本文を含めるかどうか



sortAscText: テーブルタイトルメニューの昇順のテキスト説明文



sortDescText: テーブルタイトルメニューの説明文を降順で表示します。



columnsText: 表のタイトルメニューにある対応する列のテキスト説明文



autoFill: 列を自動的に展開してテーブル全体を埋めるかどうか、デフォルトは false です。



forceFit: 水平スクロールバーを防ぐために、テーブルの列幅を強制的にテーブル全体の幅に適用するかどうか、デフォルトはfalseです。



主なメソッド



focusCell( Number row, Number col ): 指定したセルにフォーカスを移動する。



focusRow( 行数 ): 指定された行にフォーカスを移動させる



getCell( Number row, Number col ): 指定されたセルに対応する td 要素を取得します。



getHeaderCell( Number index ) ：指定されたヘッダに対応する td 要素を取得します。



getRow( Number index ): 指定された行に対応する tr 要素を取得します。



getRowClass( Record record, Number index, Object rowParams, Store store ): テーブルの行に付けられたスタイルの名前を取得します。



レコードを作成します。現在の行のデータレコード・オブジェクト



index: 現在の行のインデックス



rowParams: レンダリング時に行テンプレートに渡される設定オブジェクトで、これを使用して行本体のスタイルをカスタマイズできます。このオブジェクトは enableRowBody が true の場合にのみ有効になり、使用できるプロパティは次のとおりです。



body: 行のボディにレンダリングされる HTML コード フラグメント



bodyStyle: 行本文の tr 要素の style 属性に適用される文字列



cols: 行本文のtd要素のcolspan属性に適用される値、デフォルトは列の総数です。



store: テーブルデータセット



refresh( [Boolean headersToo] ): テーブルコンポーネントをリフレッシュします。



scrollToTop()：フォームを一番上にスクロールさせる

練習1.

グリッドパネルのスクロールバーを最後のレコードまで自動的にスクロールさせる（データの動的挿入）。

grid.getView().focusRow(vehiclePassInfoGrid.getStore().getCount() - 1)を実行します。

2:行が選択されているグリッドパネルの状態をクリアします。

grid.getSelectionModel().clearSelections()を実行します。