ExtJs中获得（GridPanel）选中的当前选中行号
分类： Ext 平时细节 2012-05-21 19:18 146人阅读 评论(0) 收藏 举报
[javascript] view plaincopyprint?<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>03.grid</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
var data = [
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name5','descn5']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
store.load();
var getRowIndex = new Ext.grid.RowSelectionModel({
listeners: {
rowselect: function(sm, row, rec) {
alert(row+1); //计算机计算是从0开始算第一行的，所以加1 补充一下
// store.indexOf(rec); //这个是取该选中的rec在store中的位置,应该就是行号
}
}
});
// 另一种方法
/* grid.getSelectionModel().on('rowselect',function(sm,rowIndx,r){
})
*/
var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm,
sm:getRowIndex
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<div id="grid"></div>
</body>
</html>
分享到：
相关推荐
本篇文章将深入讲解如何在ExtJs GridPanel中实现双击事件，并获取双击的行以及选中的复选框状态。 首先，我们要了解GridPanel的基本结构。GridPanel由Store（数据存储）和ColumnModel（列模型）组成，它们定义了...
在本文中，我们将深入探讨ExtJS4中的GridPanel样式及其选择模式。GridPanel是ExtJS框架中用于展示数据的一种重要组件，它允许用户以表格形式查看、操作和管理大量信息。 首先，我们来看一个简单的GridPanel示例。在...
此外，我们可能需要获取GridPanel中选中的当前行号，这可以通过监听`rowselect`事件并访问`grid.getSelectionModel().getSelected().index`来实现。而如果在EditGridPanel中实现了增删改查操作，那么在保存数据时，...
1. **自动生成行号**：ExtJS 提供了表格组件（GridPanel），在4.2版本中，可以通过配置实现行号的自动显示，增强了数据展示的可读性。 2. **Checkbox全选**：在ExtJS的GridPanel中，可以轻松实现复选框的选择功能，...
Ext.MessageBox.alert('show', '当前选中的' + data); }); ``` #### 五、Grid 的自定义功能扩展 除了基本的显示和交互外，ExtJs Grid还支持多种自定义功能，如添加行号、复选框选择模型、右键菜单等。这些功能的...
在`handler`方法中，我们可以监听点击事件，获取到当前选中的行和列，从而执行相应的操作。 在PHP端，我们需要创建一个接收前端请求的控制器（如`index.php`），根据HTTP请求的方法（GET、POST、PUT、DELETE）来...
业务场景，需要实现最终效果图如下： GridPanel代码如下配置： 代码如下: { xtype : ‘grid’, id : ‘grid_jglb’, frame : true, region : ‘center’, title : ‘列表详细信息’, columnLines : true, loadMask :...
在本篇文章中，我们将深入探讨 ExtJS 4 中 `record mapping` 参数的相关概念与使用方法。这是一项重要的功能，能够帮助开发者更好地管理数据模型与数据交互。通过理解这些概念，可以更加高效地开发出功能丰富的应用...
在Ext JS中，`Ext GridPanel`是一种常用的组件，用于展示和操作表格数据。它具有丰富的功能，包括分页、排序、筛选等。本示例主要关注在`GridPanel`加载完数据后如何进行特定的操作，特别是选定某些行数据。 首先，...
本文将详细介绍 Extjs 中 Grid 组件的基本用法，包括如何创建 Grid、如何配置列模型 (Column Model)、如何处理不同格式的数据源以及如何在 Grid 中添加 CheckBox。 #### 二、Grid 组件基础 ##### 2.1 构建基本的 ...
在本案例中，JSP页面负责加载ExtJS相关的JavaScript和CSS文件，并提供一个简单的链接来触发数据展示操作。 ```jsp *" pageEncoding="gb2312" %> String basePath = request.getScheme() + "://" + request....
ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能，通过本篇文章给大家介绍JavaScript中使用sencha gridpanel 编辑单元、改变单元格颜色，感兴趣的朋友...
### Ext表格控件和树...通过以上内容，我们可以看到 `GridPanel`、`EditorGridPanel` 和 `TreePanel` 在 Ext JS 中的应用非常广泛，它们提供了强大的数据展示和编辑能力，同时也为开发者提供了高度的灵活性和定制性。
new Ext.grid.RowNumberer({ header: "自动显示行号", width: 100 }), // 行号列 { header: '员工编号', dataIndex: 'EmployeeID', sortable: true, width: 100 }, { header: '名字', dataIndex: 'LastName', ...