extjs 04_grid 單擊事件新發(fā)現(xiàn)
更新時間:2012年11月27日 14:42:32 作者:
EXTJS GRID 中單擊行和單元格獲得行或者單元格的內(nèi)容(數(shù)據(jù)),本文將整理此功能的應(yīng)用,需要了解的朋友可以參考下
EXTJS GRID 中 單擊行和單元格獲得行或者單元格的內(nèi)容(數(shù)據(jù))
Js代碼
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','當前選中的數(shù)據(jù)是'+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','當前選中的數(shù)據(jù)是'+data);
}
------------------------------------------------------------------------------
Js代碼
grid.on('mouseover',function(e){//添加mouseover事件
var index = grid.getView().findRowIndex(e.getTarget());//根據(jù)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轉(zhuǎn)換成Ext.Element對象
rowEl.set({
'ext:qtip':str //設(shè)置它的tip屬性
},false);
}
});
grid.on('mouseover',function(e){//添加mouseover事件
var index = grid.getView().findRowIndex(e.getTarget());//根據(jù)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轉(zhuǎn)換成Ext.Element對象
rowEl.set({
'ext:qtip':str //設(shè)置它的tip屬性
},false);
}
});
---------------------------------------------------------------------------------
Js代碼
listeners: {
'cellclick':function(grid,rowIndex,columnIndex,e ){ }
}
//這是單擊grid單元格時,觸發(fā)的事件
listeners: {
'cellclick':function(grid,rowIndex,columnIndex,e ){ }
}
//這是單擊grid單元格時,觸發(fā)的事件
Js代碼
grid.getView().getCell(rowIndex,columnIndex).style.background-color="#FF6600";
grid.getView().getCell(rowIndex,columnIndex).style.color="#FF6600";
grid.getView().getCell(rowIndex,columnIndex).style.background-color="#FF6600";
grid.getView().getCell(rowIndex,columnIndex).style.color="#FF6600";
我要改變都是整個背景色,不是光是字的顏色。還有怎么能點一個單元格時候,讓上次的點的單元格顏色恢復(fù)到原來呢???
把表格刷新下可以把以前單擊而改變的顏色還原,grid.getView().refresh(); 然后再讓這次單擊的單元格變色。
Js代碼
grid.getView().refresh();
grid.getView().getCell(rowIndex,columnIndex).style.backgroundColor="#FF9999";
Js代碼
復(fù)制代碼 代碼如下:
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','當前選中的數(shù)據(jù)是'+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','當前選中的數(shù)據(jù)是'+data);
}
------------------------------------------------------------------------------
Js代碼
復(fù)制代碼 代碼如下:
grid.on('mouseover',function(e){//添加mouseover事件
var index = grid.getView().findRowIndex(e.getTarget());//根據(jù)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轉(zhuǎn)換成Ext.Element對象
rowEl.set({
'ext:qtip':str //設(shè)置它的tip屬性
},false);
}
});
grid.on('mouseover',function(e){//添加mouseover事件
var index = grid.getView().findRowIndex(e.getTarget());//根據(jù)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轉(zhuǎn)換成Ext.Element對象
rowEl.set({
'ext:qtip':str //設(shè)置它的tip屬性
},false);
}
});
---------------------------------------------------------------------------------
Js代碼
復(fù)制代碼 代碼如下:
listeners: {
'cellclick':function(grid,rowIndex,columnIndex,e ){ }
}
//這是單擊grid單元格時,觸發(fā)的事件
listeners: {
'cellclick':function(grid,rowIndex,columnIndex,e ){ }
}
//這是單擊grid單元格時,觸發(fā)的事件
Js代碼
grid.getView().getCell(rowIndex,columnIndex).style.background-color="#FF6600";
grid.getView().getCell(rowIndex,columnIndex).style.color="#FF6600";
grid.getView().getCell(rowIndex,columnIndex).style.background-color="#FF6600";
grid.getView().getCell(rowIndex,columnIndex).style.color="#FF6600";
我要改變都是整個背景色,不是光是字的顏色。還有怎么能點一個單元格時候,讓上次的點的單元格顏色恢復(fù)到原來呢???
把表格刷新下可以把以前單擊而改變的顏色還原,grid.getView().refresh(); 然后再讓這次單擊的單元格變色。
Js代碼
復(fù)制代碼 代碼如下:
grid.getView().refresh();
grid.getView().getCell(rowIndex,columnIndex).style.backgroundColor="#FF9999";
您可能感興趣的文章:
- 鼠標左鍵單擊變雙擊的解決方法
- JavaScript 模擬用戶單擊事件
- 用VBS控制鼠標的實現(xiàn)代碼(獲取鼠標坐標、鼠標移動、鼠標單擊、鼠標雙擊、鼠標右擊)
- js修改table中Td的值(定義td的單擊事件)
- Android開發(fā)技巧之在a標簽或TextView控件中單擊鏈接彈出Activity(自定義動作)
- Android中button實現(xiàn)onclicklistener事件的兩種方式
- Android按鈕單擊事件的四種常用寫法總結(jié)
- Android編程單擊圖片實現(xiàn)切換效果的方法
- Android編程開發(fā)之TextView單擊鏈接彈出Activity的方法
- 三種Android單擊事件onclick的實現(xiàn)方法
相關(guān)文章
JS如何調(diào)用WebAssembly編譯出來的.wasm文件
這篇文章主要介紹了關(guān)于WebAssembly編譯出來的.wasm文件js如何調(diào)用,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11溫習Javascript基礎(chǔ)語法之詞法結(jié)構(gòu)
javascript是一門簡單的語言,也是一門復(fù)雜的語言。這篇文章主要介紹了溫習Javascript基礎(chǔ)語法之詞法結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下2016-05-05javascript實現(xiàn)阻止iOS APP中的鏈接打開Safari瀏覽器
這篇文章主要介紹了javascript實現(xiàn)阻止iOS APP中的鏈接打開Safari瀏覽器,這個IOS APP一般是Web APP,否則沒法使用本文的代碼,需要的朋友可以參考下2014-06-06element-ui 時間選擇器限制范圍的實現(xiàn)(隨動)
這篇文章主要介紹了element-ui 時間選擇器限制范圍(隨動),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01關(guān)于字符串和對象互轉(zhuǎn)以及JSON.parse()的坑
這篇文章主要介紹了關(guān)于字符串和對象互轉(zhuǎn)以及JSON.parse()的坑及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09JavaScript通過this變量快速找出用戶選中radio按鈕的方法
這篇文章主要介紹了JavaScript通過this變量快速找出用戶選中radio按鈕的方法,涉及javascript中this變量的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03