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

ext grid 单击事件

EXT 
阅读更多
EXTJS GRID 中 单击行和单元格获得行或者单元格的内容(数据)
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','当前选中的数据是'+data); 
}


------------------------------------------------------------------------------
 grid.on('mouseover',function(e){//添加mouseover事件
  var index = grid.getView().findRowIndex(e.getTarget());//根据mouse所在的target可以取到列的位置
  if(index!==false){//当取到了正确的列时,(因为如果传入的target列没有取到的时候会返回false)
   var record = store.getAt(index);//把这列的record取出来
   var str = Ext.encode(record.data);//组装一个字符串,这个需要你自己来完成,这儿我把他序列化
   var rowEl = Ext.get(e.getTarget());//把target转换成Ext.Element对象
   rowEl.set({
    'ext:qtip':str  //设置它的tip属性
   },false);
   
  }
   });

---------------------------------------------------------------------------------

  listeners: {
'cellclick':function(grid,rowIndex,columnIndex,e ){ } 
}

//这是单击grid单元格时,触发的事件


grid.getView().getCell(rowIndex,columnIndex).style.background-color="#FF6600"; 
grid.getView().getCell(rowIndex,columnIndex).style.color="#FF6600"; 
我要改变都是整个背景色,不是光是字的颜色。还有怎么能点一个单元格时候,让上次的点的单元格颜色恢复到原来呢???
把表格刷新下可以把以前单击而改变的颜色还原,grid.getView().refresh(); 然后再让这次单击的单元格变色。
grid.getView().refresh(); 
grid.getView().getCell(rowIndex,columnIndex).style.backgroundColor="#FF9999";
分享到:
评论

相关推荐

    Ext Grid 导出Excel

    在IT领域,特别是Web开发中,Ext Grid是一个广泛使用的组件,用于展示和管理大量数据。它提供了丰富的功能,包括排序、筛选、分页等,使得数据的交互和操作变得非常便捷。当我们需要将Ext Grid中的数据导出为Excel...

    ext grid 导出 excel

    在按钮的点击事件处理器中,执行上述的数据转换和文件写入操作。 4. **文件下载触发**:导出完成后,我们需要创建一个隐藏的`<a>`标签,设置其`href`为生成的Excel文件的Blob URL,并模拟点击,从而触发浏览器的...

    一个很好的EXTGRID实例

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

    ext grid json分页显示

    2. 当用户滚动到Grid的底部或者点击分页导航条时,EXT Grid会触发Ajax请求,向服务器发送当前的页码和每页记录数。 3. DWR接收到请求后,根据这些参数在后端数据库执行相应的SQL查询,获取对应页的数据,并将其转换...

    EXT grid导出EXCEL

    通常,它会监听EXT Grid的某个事件(如按钮点击),在事件处理函数中执行导出操作。 请注意,为了使示例能够直接运行,你需要确保引入了EXT库、SheetJS库和FileSaver.js库,并且这些库的版本与示例代码兼容。此外,...

    Ext grid 导出Excel

    6. **触发下载**:最后,创建一个隐藏的`<a>`标签,设置其`href`属性为刚才创建的URL,并触发点击事件,这样浏览器就会开始下载Excel文件。 博客链接提到的可能是一个具体的实现示例或工具,但未提供具体内容,所以...

    ext grid 显示数据

    5. **排序(Sorting)**: Grid的每列都可进行升序或降序的排序,只需点击列头即可。可以通过`sortable`配置项控制列是否可排序。 6. **过滤(Filtering)**: Grid支持行级过滤,允许用户根据列的值筛选数据。`...

    EXT2.0 GRID 示例

    6. **事件监听**:EXT提供了丰富的事件系统,如`rowselect`、`cellclick`等,可以监听用户的交互行为,实现动态响应。 7. **Ajax交互**:GRID通常与服务器进行异步数据交换,EXT的AJAX组件(如AjaxProxy)用于发送...

    extgrid导出excel

    "extgrid导出excel"这个主题是关于如何将ExtJS中的数据网格(Ext Grid)的数据导出到Excel文件中,方便用户进行数据管理和分析。 首先,让我们深入了解一下Ext Grid。Ext Grid是一种用于展示和操作大量结构化数据的...

    JSP中使用EXT实现grid table

    3. 排序:Grid中的每一列都可以设置为可排序,用户只需点击列头,即可根据该列数据进行升序或降序排序。 4. 自定义列:EXT Grid允许开发者自定义列的显示样式和行为,可以添加图片、链接,甚至嵌入其他EXT组件。 5...

    ext grid 导出excel 代码实例

    你可以创建一个隐藏的`a`标签,设置其`href`为生成的文件内容URL,然后模拟点击事件,触发下载。 在实际应用中,你可能还需要处理一些复杂情况,比如: - 处理样式和格式:EXT Grid的样式无法直接应用于Excel,...

    EXTgrid导出excel

    EXTgrid是一款基于JavaScript的前端数据展示组件,广泛应用于Web应用程序中,用于展示大量结构化数据。它是由ExtJS库提供的一种强大的数据网格控件。在Web应用中,有时需要将EXTgrid中的数据导出到Excel文件,以便...

    Ext自定义Grid Cell插件

    在Ext JS这个强大的JavaScript框架中,`Grid...在深入研究`Ext Grid CellEdit`的过程中,了解和掌握组件化开发思想、事件处理机制以及数据绑定原理是非常重要的,这些知识点能够帮助你更好地驾驭此类自定义插件的开发。

    Ext Grid导出Excel

    同时,它可能还包含了导出按钮的定义,当用户点击这个按钮时,会触发`gridToExcel.js`中的导出逻辑。 最后,`exportexcel.jsp`可能是一个服务器端的处理程序,用于辅助导出过程。在某些情况下,由于浏览器的安全...

    ext grid带分页(服务器端)

    - 用户滚动到Grid的底部或点击分页条的下一页按钮时,EXT Grid会向服务器发送请求,携带当前页码和每页记录数。 - 服务器根据这些参数查询数据库,只返回当前页面所需的数据,并可能包含总记录数,以便正确显示...

    jsp 实现的 EXT Grid 导出excel 例子

    JSP可以通过AJAX请求触发导出操作,当用户点击“导出”按钮时,EXT Grid的Store会将其当前的数据发送到服务器。在服务器端,可以使用Apache POI库,这是一个强大的API,专门用于处理Microsoft Office格式的文件,...

    在Ext的grid里实现带radio单选功能的gridlist

    4. **禁用默认行为**:由于Grid本身已经处理了行点击事件,所以需要禁用radio按钮的默认点击行为,以防止选中状态的混乱。在renderer中,我们添加了`disabled`属性,这将阻止浏览器对radio按钮的默认处理。 5. **...

    Ext框架的Grid使用介绍

    通过监听事件,可以实现用户交互,如点击事件、编辑事件等。 5. **行操作**:行可以添加、删除、编辑,甚至拖动进行重新排序。EXT JS提供行选择模式,如单选、多选和全选。 6. **视图配置**:Grid的视图配置可以...

    EXT grid 表头 三层 插件

    EXT Grid 是一个强大的数据网格组件,广泛应用于EXT JS框架中,用于展示和操作大量结构化数据。表头的三层插件则是EXT Grid的一种扩展功能,它允许用户在表头部分实现更为复杂和多层次的布局,以更好地管理和组织...

    jq-extgrid表格插件

    **jq-extgrid表格插件详解** jq-extgrid是一款基于jQuery的强大的表格插件,它极大地扩展了基础的jQuery grid功能,提供了丰富的特性以满足复杂的表格展示需求。在Web开发中,尤其是在数据展示和操作上,jq-extgrid...

Global site tag (gtag.js) - Google Analytics