• [转] Ext Grid (ExtJs)上的单击以及双击事件


    例1:

    1. 1、双击     
    2. var cb = new Ext.grid.RowSelectionModel({     
    3.     singleSelect:true //如果值是false,表明可以选择多行;否则只能选择一行     
    4. });     
    5.     
    6. var alarmGrid = new Ext.grid.GridPanel({     
    7.     
    8. }     
    9. alarmGrid.addListener('rowdblclick', rowdblclickFn);     
    10.     
    11. function rowdblclickFn(grid, rowindex, e){     
    12.     grid.getSelectionModel().each(function(rec){     
    13.     alert(rec.get(fieldName)); //fieldName,记录中的字段名     
    14.     });     
    15. }     
    16.     
    17. 2、单击     
    18. var cb = new Ext.grid.RowSelectionModel({     
    19.     singleSelect:true //如果值是false,表明可以选择多行;否则只能选择一行     
    20. });     
    21.     
    22. var alarmGrid = new Ext.grid.GridPanel({     
    23.     
    24. }     
    25. alarmGrid.addListener('rowclick', rowclickFn);     
    26.     
    27. function rowclickFn(grid, rowindex, e){     
    28.     grid.getSelectionModel().each(function(rec){     
    29.     alert(rec.get(fieldName)); //fieldName,记录中的字段名     
    30.     });     
    31. }    

     初始化时添加:以上那个是单独写的添加单击双击事件,主要使用addListener添加'rowclick'和'rowdblclick'代表单击和双击事件。而初始化配置,只要配置Grid里面的listeners就可以了!

    Java代码  收藏代码
    1. var cb = new Ext.grid.RowSelectionModel({   
    2.      singleSelect:true //如果值是false,表明可以选择多行;否则只能选择一行   
    3. });   
    4.   
    5. var alarmGrid = new Ext.grid.GridPanel({  
    6.   
    7. }   
    8. alarmGrid.addListener('rowclick', rowclickFn);   
    9.   
    10. function rowclickFn(grid, rowindex, e){   
    11.      grid.getSelectionModel().each(function(rec){   
    12.      alert(rec.get(fieldName)); //fieldName,记录中的字段名   
    13.      });   
    14. }   
    15.   
    16. var grid = new Ext.grid.GridPanel({  
    17.    store: <your datastore>,  
    18.    columns:[<your columns>],  
    19.    renderTo:'example-grid',  
    20.    height:200,  
    21.    listeners:{  
    22. //单击  
    23.        rowdblclick : function(grid,row){  
    24.            alert("rowdblclick")  
    25.        },  
    26. //双击  
    27.        rowclick:function(grid,row){  
    28.            alert('rowclick')  
    29.        }  
    30.    }  
    31. }); 

    例2:

    ExtJs4.0的表格双击事件 怎么实现?

    查阅了相关例子和google,但是测试都不成功。求用过extjs4的大侠指点下,不胜感激!

    附google到的一个例子:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    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,记录中的字段名  
         });  
    }  
       
    var grid = new Ext.grid.GridPanel({ 
       store: <your datastore>, 
       columns:[<your columns>], 
       renderTo:'example-grid'
       height:200, 
       listeners:{ 
    //单击 
           rowdblclick : function(grid,row){ 
               alert("rowdblclick"
           }, 
    //双击 
           rowclick:function(grid,row){ 
               alert('rowclick'
           
       
    });
    ---------------问题补充---------------

      grid.addListener('itemdblclick', click, this); function click(grid, rowindex, e){ alert(11); } 双击事件是itemdbclick,单击事件就是itemclick.

  • 相关阅读:
    界面控件Telerik UI for WPF R3 2021 全新的高对比度主题
    WPF界面控件DevExpress WPF v21.2 不止支持Windows 11
    资源分享|DevExpress v21.2帮助文档下载(CHM版)
    DevExpress WinForm MVVM数据和属性绑定指南(Part 3)
    VS插件CodeRush 全新发布v21.2.4——支持Visual Studio 2022
    New!DevExpress WPF v21.2最新版本系统环境配置要求
    「B/S端开发」DevExtreme初级入门教程(React篇) 状态管理
    WPF界面工具Telerik UI for WPF入门级教程 设置一个主题(一)
    New!DevExpress WinForms v21.2最新版本系统环境配置要求
    一篇文章带你看DevExpress WPF如何支持Windows触控功能
  • 原文地址:https://www.cnblogs.com/ZhuRenWang/p/4777855.html
Copyright © 2020-2023  润新知