Ext Grid上双击触发事件

Extjs4的Ext.grid.Panel的行双击事件事件itemdblclick rowdblclick

Extjs 4的Ext.grid.Panel的行双击事件使用的是itemdblclick方法。itemdblclick方法的定义如:itemdblclick( this, record, item, index, e, eOpts )
Extjs 4中Ext.grid.Panel的itemdblclick方法参数说明如下:
this:Ext.view.View  
record : Ext.data.Model The record that belongs to the item
item : HTMLElement The item's element
index : Number The item's index
e : Ext.EventObject The raw event object
eOpts : Object The options object passed to Ext.util.Observable.addListener.

Extjs 4中Ext.grid.Panel的itemdblclick方法使用例子如下:
var multiSelect1=Ext.create('Ext.selection.CheckboxModel');
var list_id_grid1="list_id_grid111";
var pageSize1=20;
var data_list_url="listData.do";
var list_reader1="list_reader11"; 

var mainColumnModel1=[
{header:"门店名称",dataIndex:'shopName',width:160}
,{header:"门店地址",dataIndex:'addr'}
,{header:"门店编码",dataIndex:'shopCode',width:70}
]; 

Ext.define(list_reader1
, {extend : 'Ext.data.Model'
,idProperty:'shopId',fields:[{name:'shopId'}
,{name:'shopName'}
,{name:'addr'}
,{name:'shopCode'}]   }); 

var gridStore=Ext.create('Ext.data.Store', 
{autoDestroy:true,model : list_reader1
,proxy: {type: 'ajax',
url:  data_list_url,
reader: {type: 'json'
,root: 'data',idProperty: 'id'
,totalProperty: 'totalCount'} }
,pageSize:pageSize1,autoLoad : false    });
 gridStore.load();

var  list_grid1=Ext.create('Ext.grid.Panel',
{store:gridStore,id:list_id_grid1,
title:'',
columns:mainColumnModel1,
selModel:multiSelect1,
forceFit:true,collapsible:false,
loadMask:true, listeners:{
  itemdblclick:function(dataview, record, item, index, e){
	   alert("itemdblclick"); 
  },
  width:400,height:300
});

在Ext的低版本中的使用方法和上面是有点区别的:
1、双击     
var cb = new Ext.grid.RowSelectionModel({     
    singleSelect:true //如果值是false,表明可以选择多行;否则只能选择一行     
});     
    
var alarmGrid = new Ext.grid.GridPanel({     
    
}     
alarmGrid.addListener('rowdblclick', rowdblclickFn);     
    
function rowdblclickFn(grid, rowindex, e){     
    grid.getSelectionModel().each(function(rec){     
    alert(rec.get(fieldName)); //fieldName,记录中的字段名     
    });     
}     
    
2、单击     
var cb = new Ext.grid.RowSelectionModel({     
    singleSelect:true //如果值是false,表明可以选择多行;否则只能选择一行     
});     
    
var alarmGrid = new Ext.grid.GridPanel({     
    
}     
alarmGrid.addListener('rowclick', rowclickFn);     
    
function rowclickFn(grid, rowindex, e){     
    grid.getSelectionModel().each(function(rec){     
    alert(rec.get(fieldName)); //fieldName,记录中的字段名     
    });     
}    


你可能感兴趣的:(Web前端)