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. });
分享到:
相关推荐
9. **事件处理**:EXTGRID支持各种用户操作事件,如点击、双击、选中等,通过监听这些事件可以实现定制化功能。 在压缩包中,"Test.bak"可能是一个备份文件,通常包含程序的原始数据或配置信息,而"MyEXT"可能是EXT...
本实例“ext实例 左边是 tree 右边是grid 双击grid弹出form修改”是针对初学者的一个宝贵资源,它演示了如何将这些组件结合起来,实现交互式的数据操作。 1. **树形控件(Tree)**:在左边展示数据结构,通常用于...
var grid = Ext.create('Ext.grid.Panel', { store: store, columns: columns, renderTo: Ext.getBody() // 渲染到页面 }); ``` 接下来,我们需要为GridPanel添加双击事件监听器。在ExtJs中,我们可以使用`...
3. 设计列结构:双击Grid组件打开其属性面板,这里可以定义列的配置。例如,添加新的列,设置每列的标题、数据字段(与Store中字段对应)、宽度等。 4. 配置Store:EXT-JS Grid需要一个数据Store来存储和管理数据。...
此外,EXT3.2的事件系统使得我们可以轻松监听用户的交互行为,如点击、双击或编辑单元格,从而实现业务逻辑。 EXT3.2的组件化特性是其一大亮点,开发者可以组合不同的组件,如按钮、表单、菜单、树等,构建出复杂且...
5. **事件处理**:EXT Grid支持各种用户交互,如点击行、双击行、排序等。你将了解到如何监听这些事件,并编写相应的处理函数来实现特定的功能。 6. **DWR(Direct Web Remoting)**:`extdwrgrid.zip`可能包含了一...
总之,"Ext4mvc实现grid"项目涉及到Ext JS 4的MVC架构和GridPanel组件的使用,这要求开发者理解数据模型、视图组件、控制器逻辑以及如何通过MVC模式有效地组织代码。通过学习和实践这样的项目,开发者能够提升在Ext ...
JavaScript Web Grid Demo是基于Web的表格展示和数据管理的示例,主要采用了Ext Grid和DHTMLX Grid这两款强大的JavaScript库。这两个库都是用于构建高度交互性和功能丰富的数据网格组件,广泛应用于数据密集型Web...
"Ext Form GridPanel"是Ext JS库中的一个重要组件,它结合了表格(Grid)和表单(Form)的功能,提供了一种强大而灵活的方式来显示和编辑数据。在Web应用程序开发中,这种组件常用于数据录入和展示,尤其适用于处理...
11. **API使用**:理解Grid的API至关重要,例如`Ext.grid.Panel`是Grid的主要类,`Ext.grid.column.Column`定义列配置,以及`Ext.data.Store`管理数据。 12. **模板和样式**:使用XTemplate和CSS3可以自定义Grid的...
Flexigrid是一款基于jQuery的开源JavaScript表格插件,它的设计灵感来源于Ext Grid,但相比于Ext Grid,Flexigrid更加轻量级,易于理解和使用。它提供了丰富的功能,如数据分页、排序、搜索以及自定义列宽等,使得在...
var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [ {header: '姓名', dataIndex: 'name'}, {header: '年龄', dataIndex: 'age'} ] }); ``` 在这个例子中,`store`是数据源,`grid`是...
下面是一个具体的示例代码,展示了如何在Grid中添加双击事件监听器,并获取被双击单元格所在行的数据: ```javascript // 创建RowSelectionModel var cb = new Ext.grid.RowSelectionModel({ singleSelect: true /...
开发者可以使用事件监听和插件机制,为Grid添加自定义行为,如右键菜单、双击事件等。 15. **响应式设计(Responsive Design)** Grid支持不同设备和屏幕尺寸,可以自动调整布局和列宽,适应移动设备和桌面环境。...
在Ext JS中,"ext"通常指的是框架本身,它包含了许多基础组件和布局管理器,如Grid、Tree、Form等。"ext4"代表的是该框架的第四个主要版本,带来了许多新特性、性能提升和API改进。例如,4.0版本引入了新的MVVM...
- **Grid**: 创建数据表格。 - **更多组件**: 还有更多的UI组件可用于不同的场景。 #### 7. 使用Ajax - **Ajax支持**: Ext内置了对Ajax的支持,使得开发者可以轻松地从服务器异步获取数据并更新页面内容。 - **...
var grid = new Ext.grid.GridPanel({ // Grid配置项... viewConfig: { trackOver: true, plugins: new Ext.grid.ContextMenu({ menu: menu }) // 使用插件设置右键菜单 }, listeners: { rowcontextmenu: ...
这两天项目需要,临时做了一个,没有封装,该grid可以实现列和行的自定义添加和删除,包括修改标题,以及列的右击添加事件。希望对你们有所帮助!双击列名可以对列名进行修改,右键列名可以选择左侧和右侧添加列以及...
### ext+js深入浅出:关键技术知识点解析 #### 一、EXTJS概述 **EXTJS**,简称**EXT**,是一种先进的Ajax框架,用于构建视觉效果丰富的客户端应用程序。该框架完全由JavaScript编写而成,能够独立于后端技术,这...
- **Grid组件**: Grid是EXT中的表格组件,可以用来展示大量数据,并支持排序、筛选、分页等功能。它通常与Store结合使用,动态加载数据。 - **Charts**: EXT提供了一套完整的图表组件,可以创建各种统计图表,如...