extjs 04_grid クリック イベント 新しい Discovery_JavaScript スキル

EXTJS GRID の行またはセルをクリックして、行またはセルの内容 (データ) を取得します
Js コード

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

grid.addListener('cellclick',cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
var Record = Grid. getStore(). getAt(rowIndex); // レコードを取得します
var fieldName = Grid.getColumnModel().getDataIndex(columnIndex); // フィールド名を取得します
var data = record.get(fieldName); 🎜>Ext.MessageBox.alert('show','現在選択されているデータは' data);
}
関数 cellclick(grid, rowIndex, columnIndex, e) {
var record = Grid.getStore().getAt(rowIndex); // レコードを取得します
var fieldName = Grid.getColumnModel().getDataIndex(columnIndex); // フィールド名を取得します🎜>var data = record.get(fieldName);
Ext.MessageBox.alert('show','現在選択されているデータは' data);


-- ---------------------------------------------------- ---- -----------------------
Js コード

コードをコピー

コードは次のとおりです: grid.on('mouseover',function(e){//マウスオーバー イベントを追加します varindex =grid.getView ().findRowIndex(e.getTarget ());//マウスが置かれているターゲットに応じて列の位置を取得できます

if(index!==false){//正しい列が取得された場合、 (受信ターゲット列が取得されない場合は false が返されるため)

var record = store.getAt(index);//この列のレコードを取得します
var str = Ext.encode(record.data); //文字列を組み立てます。これは自分で完了する必要があります。ここではシリアル化します。
var rowEl = Ext.get(e.getTarget());//ターゲットを Ext.Element オブジェクトに変換します。
rowEl。 set({
'ext:qtip':str //チップ属性を設定します
},false)
grid.on('mouseover',function( e)/ /マウスオーバー イベントを追加します
varindex =grid.getView().findRowIndex(e.getTarget());//マウスが置かれているターゲットに従って列の位置を取得できます
if(index!==false){ //正しいカラムが取得された場合（受信対象カラムが取得できなかった場合は false が返されるため）
var Record = store.getAt(index); //Getこの列のレコード
var str = Ext.encode(record.data);//文字列を組み立てます。これは自分で行う必要があります。ここではシリアル化します
var rowEl = Ext.get(e.getTarget ()) ;//ターゲットを Ext.Element オブジェクトに変換します
rowEl.set({
'ext:qtip':str //そのチップ属性を設定します
},
}
});


--------------------------------- --- ---------------------------------------------------
Js コード

コードをコピー

コードは次のとおりです: listeners: { 'cellclick':function(grid ,rowIndex,columnIndex,e ){ } } //これは、グリッド セルがクリックされたときにトリガーされるイベントです

listeners: {

'cellclick' :function(grid,rowIndex,columnIndex ,e ){ }
}
//これはグリッド セルがクリックされたときにトリガーされるイベントです
Js コード
grid.getView().getCell(rowIndex ,columnIndex).style.background -color="#FF6600";
grid.getView().getCell(rowIndex,columnIndex).style.color="#FF6600"; (rowIndex,columnIndex).style .background-color="#FF6600";
grid.getView().getCell(rowIndex,columnIndex).style.color="#FF6600"; ＞全体を変更したい 背景色は文字の色だけではありません。また、セルをクリックしたときに、最後にクリックしたセルの色を元の色に戻すにはどうすればよいですか? ? ?
テーブルを更新して、前回のクリックで変更された色を復元します (grid.getView().refresh();)。次に、今回クリックしたセルの色を変更します。
Js コード




コードをコピー

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


grid.getView( ).refresh ();

grid.getView().getCell(rowIndex,columnIndex).style.backgroundColor="#FF9999";