进来项目中需要使用双击/单击行记录来获取数据,将实现的方式记录如下:
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就可以了!
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')
}
}
});
恩,我找了一些资料并且自己也实践了一下,的确能用!,大家互相学习吧
资料来源:
http://hi.baidu.com/k_boy/blog/item/da3f3afa86910b809e5146f9.html
http://marco--liu.iteye.com/blog/109181
http://qixiaopeng.iteye.com/blog/419155
分享到:
相关推荐
本篇文章将深入讲解如何在ExtJs GridPanel中实现双击事件,并获取双击的行以及选中的复选框状态。 首先,我们要了解GridPanel的基本结构。GridPanel由Store(数据存储)和ColumnModel(列模型)组成,它们定义了...
9. **事件处理**:EXTGRID支持各种用户操作事件,如点击、双击、选中等,通过监听这些事件可以实现定制化功能。 在压缩包中,"Test.bak"可能是一个备份文件,通常包含程序的原始数据或配置信息,而"MyEXT"可能是EXT...
Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分...
总结来说,"Ext Grid 导出Excel"这个话题涵盖了从JavaScript数据结构到Excel文件格式转换的过程,涉及到的主要技术有Ext JS的Grid和Store组件,以及第三方库SheetJS。这个过程对于那些需要提供数据导出功能的Web应用...
综上所述,EXT Grid导出Excel涉及到的技术主要包括EXT Grid的数据操作、XLSX.js库的使用、自定义按钮和事件处理、文件下载触发机制以及可能的样式转换和性能优化。通过这些技术,我们可以实现EXT Grid数据的便捷导出...
extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui extjs 界面风格样式 可通过css修改自己想要的样式 extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列锁 ajax...
本实例“ext实例 左边是 tree 右边是grid 双击grid弹出form修改”是针对初学者的一个宝贵资源,它演示了如何将这些组件结合起来,实现交互式的数据操作。 1. **树形控件(Tree)**:在左边展示数据结构,通常用于...
### Ext grid panel 滚动条位置不变 在前端开发领域,特别是在使用Ext JS框架时,保持滚动条位置不变是一个非常实用的功能。特别是在处理实时数据更新的场景下,这一功能可以确保用户在数据刷新后仍然停留在之前...
在EXT JS框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能和灵活性。在某些场景下,用户可能需要合并行或列以更好地组织和呈现数据,例如在显示汇总信息或者创建复杂的报告时。"ext grid ...
在提供的"extdemo"压缩包中,可能包含了一个展示如何创建和配置Grid的示例,包括设置列、数据绑定、事件处理和用户交互。 接下来,我们谈谈Ext Tree。Tree组件是一个可折叠的层级结构,常用于展现具有层次关系的...
在IT领域,尤其是在Web开发中,"ext grid json分页显示"是一个常见的需求,它涉及到前端数据展示和后端数据交互的关键技术。本例中提到的解决方案是利用DWR(Direct Web Remoting)和EXT.js库来实现。下面将详细阐述...
Ext Grid允许用户筛选、排序、分页以及编辑数据,是企业级应用中常用的数据展示工具。 在Ext JS中,导出数据到Excel通常通过以下步骤实现: 1. **获取数据**:首先,你需要从Ext Grid中获取显示的所有数据。这可以...
首先,我们需要确保EXT Grid的数据已经加载完成并且正确显示在界面上。 1. **创建Excel文件**:EXT Grid导出Excel通常通过创建一个Excel文件的XML格式(.xls或.xlsx)来实现。这可以通过使用第三方库如SheetJS(js-...
通过阅读"5_使用Grids显示数据.doc"文档,你可以更深入地了解EXT JS Grid的用法和实践,包括如何配置和使用上述功能,以及解决实际项目中的问题。掌握EXT JS Grid的使用,对于提升前端数据展示的效率和用户体验有着...
在EXT JS这个强大的JavaScript...综上所述,EXT Grid数据绑定涉及数据模型、视图和数据源的交互,而数据查找和重填则是数据操作的关键步骤。通过熟练掌握这些概念和方法,开发者能够构建出高效、动态的数据展示应用。
Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码
综上所述,"ext grid tree 应用"展示了EXT JS在构建动态、交互式Web应用程序的强大能力,包括数据展示、数据管理、用户交互以及个性化设置等多个方面。通过学习和理解这些知识点,开发者可以更好地利用EXT JS创建...
支持Ext3 Ext4导出excel,客户端导出表格,支持各种主流浏览器。
4. **创建Grid Panel**: 创建一个Ext.grid.Panel实例,将Store、Model和Column Model绑定到Grid Panel上。还可以配置其他选项,如分页、排序和过滤。 5. **加载数据**: 在页面加载时,Store会自动发送请求到Web服务...
在这个示例中,`grid`对象是一个`Ext.grid.GridPanel`实例,它包含了数据存储(`store`)、列定义以及样式配置等。值得注意的是`width`和`height`属性的设置方式,正是我们前面讨论的动态尺寸调整策略。 ### 小结 ...