`
luciesfly
  • 浏览: 70650 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

Ext Grid 单双击

EXT 
阅读更多
   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. }   

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,记录中的字段名  
    });  




初始化时添加:以上那个是单独写的添加单击双击事件,主要使用 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. });
分享到:
评论

相关推荐

    一个很好的EXTGRID实例

    9. **事件处理**:EXTGRID支持各种用户操作事件,如点击、双击、选中等,通过监听这些事件可以实现定制化功能。 在压缩包中,"Test.bak"可能是一个备份文件,通常包含程序的原始数据或配置信息,而"MyEXT"可能是EXT...

    ext实例 左边是 tree 右边是grid 双击grid弹出form修改

    本实例“ext实例 左边是 tree 右边是grid 双击grid弹出form修改”是针对初学者的一个宝贵资源,它演示了如何将这些组件结合起来,实现交互式的数据操作。 1. **树形控件(Tree)**:在左边展示数据结构,通常用于...

    ExtJs GridPanel双击事件获得双击的行

    var grid = Ext.create('Ext.grid.Panel', { store: store, columns: columns, renderTo: Ext.getBody() // 渲染到页面 }); ``` 接下来,我们需要为GridPanel添加双击事件监听器。在ExtJs中,我们可以使用`...

    EXT-JS Grid 用法

    3. 设计列结构:双击Grid组件打开其属性面板,这里可以定义列的配置。例如,添加新的列,设置每列的标题、数据字段(与Store中字段对应)、宽度等。 4. 配置Store:EXT-JS Grid需要一个数据Store来存储和管理数据。...

    Ext3.2源码、API、及Demo(grid例子)

    此外,EXT3.2的事件系统使得我们可以轻松监听用户的交互行为,如点击、双击或编辑单元格,从而实现业务逻辑。 EXT3.2的组件化特性是其一大亮点,开发者可以组合不同的组件,如按钮、表单、菜单、树等,构建出复杂且...

    EXT 组件和控件的 视频教程

    5. **事件处理**:EXT Grid支持各种用户交互,如点击行、双击行、排序等。你将了解到如何监听这些事件,并编写相应的处理函数来实现特定的功能。 6. **DWR(Direct Web Remoting)**:`extdwrgrid.zip`可能包含了一...

    Ext4mvc实现grid

    总之,"Ext4mvc实现grid"项目涉及到Ext JS 4的MVC架构和GridPanel组件的使用,这要求开发者理解数据模型、视图组件、控制器逻辑以及如何通过MVC模式有效地组织代码。通过学习和实践这样的项目,开发者能够提升在Ext ...

    javascript web grid demo

    JavaScript Web Grid Demo是基于Web的表格展示和数据管理的示例,主要采用了Ext Grid和DHTMLX Grid这两款强大的JavaScript库。这两个库都是用于构建高度交互性和功能丰富的数据网格组件,广泛应用于数据密集型Web...

    ext form gridpanel

    "Ext Form GridPanel"是Ext JS库中的一个重要组件,它结合了表格(Grid)和表单(Form)的功能,提供了一种强大而灵活的方式来显示和编辑数据。在Web应用程序开发中,这种组件常用于数据录入和展示,尤其适用于处理...

    sencha-touch grid 代码

    11. **API使用**:理解Grid的API至关重要,例如`Ext.grid.Panel`是Grid的主要类,`Ext.grid.column.Column`定义列配置,以及`Ext.data.Store`管理数据。 12. **模板和样式**:使用XTemplate和CSS3可以自定义Grid的...

    flexigrid 类似ext grid的JS表格代码

    Flexigrid是一款基于jQuery的开源JavaScript表格插件,它的设计灵感来源于Ext Grid,但相比于Ext Grid,Flexigrid更加轻量级,易于理解和使用。它提供了丰富的功能,如数据分页、排序、搜索以及自定义列宽等,使得在...

    ext 的3种传参demo

    var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [ {header: '姓名', dataIndex: 'name'}, {header: '年龄', dataIndex: 'age'} ] }); ``` 在这个例子中,`store`是数据源,`grid`是...

    Extjs Grid 操作大全

    下面是一个具体的示例代码,展示了如何在Grid中添加双击事件监听器,并获取被双击单元格所在行的数据: ```javascript // 创建RowSelectionModel var cb = new Ext.grid.RowSelectionModel({ singleSelect: true /...

    extjs表格Grid比较全面的功能

    开发者可以使用事件监听和插件机制,为Grid添加自定义行为,如右键菜单、双击事件等。 15. **响应式设计(Responsive Design)** Grid支持不同设备和屏幕尺寸,可以自动调整布局和列宽,适应移动设备和桌面环境。...

    Ext4.1.0 Doc中文版 V1.0.0 Beta

    在Ext JS中,"ext"通常指的是框架本身,它包含了许多基础组件和布局管理器,如Grid、Tree、Form等。"ext4"代表的是该框架的第四个主要版本,带来了许多新特性、性能提升和API改进。例如,4.0版本引入了新的MVVM...

    doc格式 ext EXT 中文手册

    - **Grid**: 创建数据表格。 - **更多组件**: 还有更多的UI组件可用于不同的场景。 #### 7. 使用Ajax - **Ajax支持**: Ext内置了对Ajax的支持,使得开发者可以轻松地从服务器异步获取数据并更新页面内容。 - **...

    ExtJs grid行 右键菜单的两种方法

    var grid = new Ext.grid.GridPanel({ // Grid配置项... viewConfig: { trackOver: true, plugins: new Ext.grid.ContextMenu({ menu: menu }) // 使用插件设置右键菜单 }, listeners: { rowcontextmenu: ...

    实现grid行 列的自定义添加和删除 绝对原创

    这两天项目需要,临时做了一个,没有封装,该grid可以实现列和行的自定义添加和删除,包括修改标题,以及列的右击添加事件。希望对你们有所帮助!双击列名可以对列名进行修改,右键列名可以选择左侧和右侧添加列以及...

    ext+js深入浅出

    ### ext+js深入浅出:关键技术知识点解析 #### 一、EXTJS概述 **EXTJS**,简称**EXT**,是一种先进的Ajax框架,用于构建视觉效果丰富的客户端应用程序。该框架完全由JavaScript编写而成,能够独立于后端技术,这...

    十分有用有帮助的EXT学习笔记

    - **Grid组件**: Grid是EXT中的表格组件,可以用来展示大量数据,并支持排序、筛选、分页等功能。它通常与Store结合使用,动态加载数据。 - **Charts**: EXT提供了一套完整的图表组件,可以创建各种统计图表,如...

Global site tag (gtag.js) - Google Analytics