首頁 > web前端 > js教程 > extjs 04_grid 點選事件新發現_javascript技巧

extjs 04_grid 點選事件新發現_javascript技巧

WBOY
發布: 2016-05-16 17:47:55
原創
1104 人瀏覽過

EXTJS GRID 中單擊行和單元格獲得行或者單元格的內容(數據)
Js代碼

複製代碼程式碼如下:

grid.addListener('cellclick',cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
var record = grid.getore( getAt(rowIndex); //Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var data = record.get(fieldName);
Ext. MessageBox.alert('show','目前選取的資料是' data);
}
grid.addListener('cellclick',cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); //Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var data = record.get(fieldName);
Ext.MessageBox.alert('show','目前選取的資料是' data);
}

------ -------------------------------------------------- ----------------------
Js程式碼
複製程式碼 程式碼如下:

grid.on('mouseover',function(e){//新增mouseover事件
var index = grid.getView().findRowIndex(e.getTarget ());//根據mouse所在的target可以取到列的位置
if(index!==false){//當取到了正確的列時,(因為如果傳入的target列沒有取到的時候會回傳false)
var record = store.getAt(index);//把這列的record取出來
var str = Ext.encode(record.data);//組裝一個字串,這需要你自己來完成,這兒我把他序列化
var rowEl = Ext.get(e.getTarget());//把target轉換成Ext.Element物件
rowEl.set({
'ext:qtip':str //設定它的tip屬性
},false);
}
});
grid.on('mouseover',function(e){/ /新增mouseover事件
var index = grid.getView().findRowIndex(e.getTarget());//根據mouse所在的target可以取到列的位置
if(index!==false){ //當取到了正確的列時,(因為如果傳入的target列沒有取到的時候會回傳false)
var record = store.getAt(index);//把這列的record取出來
var str = Ext.encode(record.data);//組裝一個字串,這個需要你自己來完成,這兒我把他序列化
var rowEl = Ext.get(e.getTarget()) ;//把target轉換成Ext.Element物件
rowEl.set({
'ext:qtip':str //設定它的tip屬性
},false);
}
});

------------------------------------- --------------------------------------------
Js代碼
複製程式碼 程式碼如下:

listeners: {
'cellclick:function( ,rowIndex,columnIndex,e ){ }
}
//這是點選grid儲存格時,觸發的事件
listeners: {
'cellclick':function(grid,rowIndex,columnIndex,columnIndex ,e ){ }
}
//這是點擊grid單元格時,觸發的事件
Js程式碼
grid.getView().getCell(rowIndex,columnIndex).style.background -color="#FF6600";
grid.getView().getCell(rowIndex,columnIndex).style.color="#FF6600";
grid.getView().getCell(rowIndex,columnIndex). .background-color="#FF6600";
grid.getView().getCell(rowIndex,columnIndex).style.color="#FF6600";

我要改變都是整個背景色,不是光是字的顏色。還有怎麼能點一個單元格時候,讓上次的點的單元格顏色恢復到原來呢? ? ?
把表格刷新下可以把以前點選而改變的顏色還原,grid.getView().refresh(); 然後再讓這次點擊的儲存格變色。
Js程式碼
複製程式碼 程式碼如下:
grid.getView(). ();
grid.getView().getCell(rowIndex,columnIndex).style.backgroundColor="#FF9999";

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板