`
endual
  • 浏览: 3566981 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

extjs grid 事件

    博客分类:
  • ajax
阅读更多

Grid的数据源是store,我们有时需要做点击某一个项而触发一定的事件,在这个处理过程中,我们不免需要得到点击的那个项,如何获得相应的数据呢? 首先,来看看怎么写触发事件。假设变量_grid就是一个GridPanel的句柄(或者说引用),我们要对实现双击GridPanel中的某一项时触发一个event。那么我们只需要 _grid.addListener('celldblclick',function(grid, rowIndex, columnIndex, e){ //Todo Something here }); function中的4个参数的含义,我们来参看下文档。 celldblclick : ( Grid this, Number rowIndex, Number columnIndex, Ext.EventObject e ) Fires when a cell is double clicked (如果你希望是单击,可以把celldblclick换成cellclick) 我们已经可以得到点击的那个项所对应的列索引和行索引,接下来要做的就是靠这两个重要的索引去帮助找出你想要的数据。我们假设,记录(Record)的field为['pid','name','gender','birthday']. 那么我们先获得Store,使用GridPanel的getStore()方法。 方法原型是:getStore() : DataSource ,这里的DataSource其实就是Ext.data.Store. 然后我们使用getAt( Number index ) : Ext.data.Record方法去得到点击触发事件的那个记录(Record), 得到了Record后怎么办呢?注意哦,这里的Record的用法并不是像Json那样直接用属性去取值的。 而是需要使用方法get( String name ) : Object 这时,虽然返回的是Object,其实就已经是String了,可以直接alert或者做其他的处理。 _grid.addListener('celldblclick',function(grid, rowIndex, columnIndex, e){ var s=grid.getStore(); var x=s.getAt(rowIndex); alert(x.get('pid')); });

分享到:
评论

相关推荐

    ExtJS grid过滤操作

    ExtJS Grid是一个强大的数据展示组件,它允许用户以表格的形式查看和操作大量数据。在实际应用中,数据过滤是常见的需求,以便用户能快速定位到感兴趣的信息。本篇将深入探讨ExtJS Grid的过滤操作,以及如何动态地对...

    ExtJs Grid选择行

    在ExtJs框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能,包括数据的排序、分页、过滤以及行选择等。在实际应用中,经常需要根据用户交互来判断Grid中的行是否被选中,以便进行下一步的...

    EXTJS grid导出EXCEL文件

    1. **EXTJS Grid组件**:EXTJS Grid是EXTJS的核心组件之一,它允许开发者创建可分页、可排序、可过滤的数据表格。Grid可以与各种数据源(如JSON、XML或内存中的数组)配合使用,并通过Store对象进行数据的加载和管理...

    extjs grid数据导出excel文件

    具体实现时,开发者可能会在EXTJS的事件处理器中添加导出功能,例如在Grid的工具栏上添加一个“导出”按钮,当点击该按钮时触发数据导出的函数。这个函数会按照上述步骤操作,最终生成一个可供下载的Excel文件。 在...

    extjs grid示例代码

    - **事件监听**:可以监听Grid的各种事件,如`itemclick`、`sortchange`,以执行相应的业务逻辑。 - **响应式布局**:使用`Ext.grid.Viewport`或`Ext.container.Viewport`,使Grid适应不同的屏幕尺寸。 6. **优化...

    ExtJs grid多选时获取选中的所有值

    ### ExtJs Grid 多选及获取选中值详解 #### 一、背景介绍 在Web应用开发中,ExtJs 是一款非常强大的JavaScript框架,它能够帮助开发者快速构建复杂的用户界面。其中,Grid Panel(简称 Grid)是ExtJs中最常用的一个...

    extjs grid

    EXTJS Grid是EXTJS库中的一个核心组件,用于创建数据密集型的表格视图,它在Web应用程序中常用于展示和操作大量结构化数据。EXTJS Grid提供了丰富的功能,包括分页、排序、过滤、编辑等,使得用户可以高效地管理和...

    EXTJS Grid总结例子

    EXTJS Grid允许开发者自定义列渲染、事件监听和行为扩展。例如,可以使用`renderer`函数改变单元格显示,使用`listeners`添加事件处理,或者创建自定义插件以实现特定功能。 七、网格操作 EXTJS Grid提供了丰富的...

    extjs grid 多表头插件

    ExtJS Grid是一款强大的数据展示组件,常用于构建复杂的Web应用程序中的数据网格。多表头插件是ExtJS Grid的一个重要特性,它允许我们创建具有多层次、复杂结构的表头,以便更好地组织和呈现数据。在ExtJS Grid中,...

    Extjs grid 中文排序问题修正

    在EXTJS开发中,我们经常会遇到使用Grid组件展示数据的情况,特别是当数据包含中文字符时,可能会遇到排序问题。EXTJS Grid默认的排序机制对于英文字符处理得较好,但对于中文字符,由于编码和比较规则的不同,可能...

    Extjs grid分页1

    ExtJS Grid 分页是Web应用中数据展示的重要组成部分,它允许用户高效地浏览大量数据而无需一次性加载所有记录。在本文中,我们将深入探讨ExtJS Grid的分页功能及其实现方式。 首先,ExtJS Grid是一种强大的...

    Extjs Grid 扩展实例

    对于ExtJS Grid,我们可能要扩展其基础配置,比如自定义列、行渲染器、编辑器,甚至是行为事件处理。 1. **自定义列**:在Grid中,我们可以定义自己的Column模型,添加额外的字段或调整默认的行为。例如,我们可以...

    Extjs Grid 操作大全

    根据提供的文件信息以及标题与描述,本文将详细探讨Extjs Grid的操作大全,特别是关于如何获取Grid中的各种值以及如何添加各种点击事件。 ### Extjs Grid 操作大全 #### 一、Extjs Grid简介 Extjs 是一个用...

    Extjs4.2 Grid filter Demo 表格过滤实验

    这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》

    Extjs grid分页多选记忆功能

    很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...

    ExtJS笔记---Grid实现后台分页

    这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...

    ExtJS_grid.rar_Grid javascript_extjs grid

    - **API and MVC**:ExtJS基于MVC(Model-View-Controller)架构,提供了丰富的API和事件系统,方便开发者进行深度开发。 "第三节_ExtJS表格控件和树控件.pdf"教程可能涵盖了以上这些内容,并通过实例详细解释了...

    extjs gridToExcel

    这是一个简单的在extjs下的grid转化到Excel,里面代码简单易懂,在包里面还集成了复杂的js转化函数,不过本人没有用它来进行转化! 注:在用EXTJS的导出Excel技术中,一定要注意分页的问题

    Extjs Grid2Grid拖拽

    "Grid2Grid拖拽"功能是指在两个ExtJS Grid之间通过鼠标拖放操作来移动或复制行数据。这种功能在数据管理、比较和操作场景中非常实用。 在实现"Extjs Grid2Grid拖拽"时,主要涉及以下几个关键知识点: 1. **ExtJS ...

    Extjs Grid 中的 ToolTip效果

    在EXTJS中,Grid组件是数据展示的核心,它允许用户以表格形式查看和操作大量数据。在实际应用中,为了提供更好的用户体验,我们经常需要在鼠标悬停在某个单元格或列头时显示额外的信息,这就是ToolTip的效果。EXTJS ...

Global site tag (gtag.js) - Google Analytics