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','當(dāng)前選中的數(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','當(dāng)前選中的數(shù)據(jù)是'+data);
}
------------------------------------------------------------------------------
Js代碼
grid.on('mouseover',function(e){//添加mouseover事件
var index = grid.getView().findRowIndex(e.getTarget());//根據(jù)mouse所在的target可以取到列的位置
if(index!==false){//當(dāng)取到了正確的列時，（因為如果傳入的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){//當(dāng)取到了正確的列時，（因為如果傳入的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";
我要改變都是整個背景色，不是光是字的顏色。還有怎么能點(diǎn)一個單元格時候，讓上次的點(diǎn)的單元格顏色恢復(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','當(dāng)前選中的數(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','當(dāng)前選中的數(shù)據(jù)是'+data);
}
------------------------------------------------------------------------------
Js代碼
復(fù)制代碼 代碼如下:
grid.on('mouseover',function(e){//添加mouseover事件
var index = grid.getView().findRowIndex(e.getTarget());//根據(jù)mouse所在的target可以取到列的位置
if(index!==false){//當(dāng)取到了正確的列時，（因為如果傳入的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){//當(dāng)取到了正確的列時，（因為如果傳入的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";
我要改變都是整個背景色，不是光是字的顏色。還有怎么能點(diǎn)一個單元格時候，讓上次的點(diǎn)的單元格顏色恢復(fù)到原來呢？？？
把表格刷新下可以把以前單擊而改變的顏色還原，grid.getView().refresh(); 然后再讓這次單擊的單元格變色。
Js代碼
復(fù)制代碼 代碼如下:
grid.getView().refresh();
grid.getView().getCell(rowIndex,columnIndex).style.backgroundColor="#FF9999";
您可能感興趣的文章:
- 鼠標(biāo)左鍵單擊變雙擊的解決方法
- JavaScript 模擬用戶單擊事件
- 用VBS控制鼠標(biāo)的實現(xiàn)代碼（獲取鼠標(biāo)坐標(biāo)、鼠標(biāo)移動、鼠標(biāo)單擊、鼠標(biāo)雙擊、鼠標(biāo)右擊）
- js修改table中Td的值(定義td的單擊事件)
- Android開發(fā)技巧之在a標(biāo)簽或TextView控件中單擊鏈接彈出Activity(自定義動作)
- Android中button實現(xiàn)onclicklistener事件的兩種方式
- Android按鈕單擊事件的四種常用寫法總結(jié)
- Android編程單擊圖片實現(xiàn)切換效果的方法
- Android編程開發(fā)之TextView單擊鏈接彈出Activity的方法
- 三種Android單擊事件onclick的實現(xiàn)方法
相關(guān)文章
這篇文章主要介紹了微信小程序swiper實現(xiàn)文字縱向輪播提示效果，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
HTML中Form表單的reset方法被用來清空用戶所輸入的內(nèi)容，以前一直誤以為其是單純的將input等輸入項中的值清空2014-03-03
最近，把項目中用到的下拉框組件重新封裝了一下，以構(gòu)造函數(shù)的方式進(jìn)行封裝，主要方法和事件定義在原型上，下面是主要的實現(xiàn)代碼并添加了比較詳細(xì)的注釋，分享出來供大家參考2018-10-10
javascript foreach中如何獲取數(shù)組下標(biāo)/index
這篇文章主要介紹了javascript foreach中如何獲取數(shù)組下標(biāo)/index問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
js插件dropload上拉下滑加載數(shù)據(jù)實例解析
這篇文章主要為大家詳細(xì)解析了js插件dropload上拉下滑加載數(shù)據(jù)實例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
在數(shù)組中有兩個可以用來直接排序的方法，分別是reverse（）和sort（）。下面通過本文給大家詳細(xì)介紹，對js 數(shù)組重排序相關(guān)知識感興趣的朋友一起看看吧2016-11-11
js使用html2canvas實現(xiàn)屏幕截取的示例代碼
這篇文章主要介紹了js使用html2canvas實現(xiàn)屏幕截取的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
如何在微信小程序?qū)崿F(xiàn)一個幸運(yùn)轉(zhuǎn)盤小游戲
這篇文章主要給大家介紹了關(guān)于如何在微信小程序?qū)崿F(xiàn)一個幸運(yùn)轉(zhuǎn)盤小游戲的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
js實現(xiàn)倒計時(距離結(jié)束還有)示例代碼
本文與大家分享個js實現(xiàn)倒計時的代碼，主要實現(xiàn)功能距離結(jié)束還有多少時間，感興趣的朋友可以參考下，希望對大家學(xué)習(xí)js有所幫助2013-07-07
超漂亮的Bootstrap 富文本編輯器summernote
Summernote 是一個簡單，靈活，所見即所得（WYSIWYG）的編輯器，基于 jQuery 和 Bootstrap 構(gòu)建。對bootstrap 文本編輯器相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-04-04