Ext.grid.GridPanelのプロパティとメソッドなど。
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: 列の幅を変更できるかどうか、デフォルトはtrue
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. 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()を実行します。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
ハートビート・エフェクトのためのHTML+CSS
-
HTML ホテル フォームによるフィルタリング
-
HTML+cssのボックスモデル例(円、半円など)「border-radius」使いやすい
-
HTMLテーブルのテーブル分割とマージ(colspan, rowspan)
-
ランダム・ネームドロッパーを実装するためのhtmlサンプルコード
-
Html階層型ボックスシャドウ効果サンプルコード
-
QQの一時的なダイアログボックスをポップアップし、友人を追加せずにオンラインで話す効果を達成する方法
-
sublime / vscodeショートカットHTMLコード生成の実装
-
HTMLページを縮小した後にスクロールバーを表示するサンプルコード
-
html のリストボックス、テキストフィールド、ファイルフィールドのコード例