我想用ext写一个grid，显示数据时选中其中的一行或几行，发现每次页面打开后grid的复选框都是被选中后立即又取消
给选中操作增加延迟，发现这种情况就没有啦
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>ext的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 sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
var data = [
['1','male','name1','descn1'],
['2','female','name2','descn2'],
['3','male','name3','descn3'],
['4','female','name4','descn4'],
['5','male','name5','descn5']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
])
});
var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm,
sm: sm
});
grid.store.addListener('load',function(store,record,options){
//选择相应数据,此处加了延迟，防止选中之后立即又取消
(function(){
grid.getSelectionModel().selectRow(1);
}).defer(500);
});
store.load();
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<div id="grid"></div>
</body>
</html>
分享到：
相关推荐
在Ext JS这个强大的JavaScript框架中，开发人员经常需要创建数据展示组件，比如Grid，来显示大量数据并提供交互性。Grid List是Grid的一种扩展，它不仅具有基本的表格功能，还可以进行更复杂的操作。本教程将详细...
除了`select`事件，还有其他与选择相关的事件，如`deselect`（取消选择行时触发）和`selectionchange`（选中状态改变时触发，包括选择和取消选择）。这些事件可以用来跟踪Grid的选择状态，并根据需要更新应用程序的...
### EXTGrid属性方法详解 #### 一、Ext.grid.GridPanel `Ext.grid.GridPanel`是ExtJS 4.0中的一个关键组件，用于创建数据表格。以下为该组件的一些核心属性及其含义： - **store**: 数据存储器，用于存放表格的...
例如，通过`grid.getSelectionModel().selectRow(startrow)`选取当前行，`grid.getSelectionModel().getSelected()`获取选中行的数据，然后构造链接URL，最后返回包含链接的HTML字符串。 4. **配置信息与动态Grid**...
在软件开发中，特别是在构建用户界面时，ExtJS是一个常用且强大的JavaScript库，它提供了丰富的组件，例如Ext.grid，用于创建交互式的表格视图。在处理Ext.grid时，理解其属性、方法和事件是至关重要的。以下是对...
单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功能咱们就不提了。 自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，...
`Main-subPaging.js`可能是实现主子表分页功能的主要代码文件，它可能包含了主Grid和子Grid的配置，以及选中主表行时触发子表更新的逻辑。例如，我们可以创建一个监听器，当主表的`itemclick`事件发生时，获取选中的...
2. **使用CheckboxSelectionModel**：这是另一种实现复选框选择的方式，通过实例化`Ext.grid.CheckboxSelectionModel`并将其添加到表格配置的`sm`属性中。这种模式支持多选，并且可以轻松地获取所有被选中的行记录。...
2.3. grid默认自带的功能 2.4. 按顺序，咱们先要把常见功能讲到 2.4.1. 自主决定每列的宽度 2.4.2. 让grid支持按列排序 2.4.3. 中文排序是个大问题 2.5. 让单元格里显示红色的字，图片，按钮，你还能想到什么？ 2.6....
#### 表格复选框默认选中的实现 利用`selModel`的`checked`属性，可以在初始化时指定哪些行默认被选中。 #### 表格顶端工具条 通过`dockedItems`配置，添加`Ext.toolbar.Toolbar`到表格顶部，可包含按钮、下拉框等...
var grid = new Ext.grid.GridPanel({ el: 'grid', ds: ds, cm: cm }); grid.render(); ``` 扩展到更复杂的需求，例如在表格中添加CheckBox选中功能，可以创建一个CheckboxSelectionModel并将其添加到...
- `onLoad`: 数据加载后触发的事件，可以用来处理加载后的逻辑，比如设置默认选中项。 - `beforeLoad`: 数据加载前触发的事件，可以用来修改请求参数，如分页信息。 5. **事件监听和处理**: 为了响应用户操作，如...
在Ext JS中，`Ext GridPanel`是一种常用的...这在实现一些自定义行为，如默认选中某些数据或者在数据更新后保持用户的特定选择时非常有用。在实际开发中，可以根据需求调整`idxs`数组的内容，以满足不同场景下的需求。
单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功能咱们就不提了。 自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染...
1. **阻止默认浏览器拖放行为**：在控件上设置`unselectable`属性，防止文本被选中。 2. **设置拖动标志**：使用CSS来定义拖动时控件的外观。 3. **处理数据交换**：在拖放过程中，可能需要传递某些数据，例如控件的...
综上所述，获取Grid选择行数据的方法取决于你的具体需求，例如是否需要所有选中行、单个选中行、或者只在用户点击时获取。在实际开发中，你应该根据应用的需求和你使用的Ext JS版本选择合适的方法。同时，确保正确...
### Ext与后台数据库交互知识点详解 #### 一、Ext中常用的类 ...`ComboBox`有一个`name`属性，用于存放显示变量名称，该属性中保存的是选中行的显示值。通过合理配置这些属性，可以实现丰富的下拉列表功能。
对于表格(Grid)，则可能是选中的行(`selections`)或某一行的索引(`index`)。 - **目标**(Target): 在树中，目标节点可以是任意节点；而在表格中，则可能是一行或多行。 #### 1.2 拖放属性 为了使控件具有拖放能力，...
为了解决这个问题，我们需要确保在用户选择 Combobox 项后，PropertyGrid 显示和保存的是 displayField 的值，而不是 valueField。一种解决方法是通过监听PropertyGrid的`beforepropertychange`事件，在这个事件中...
Ext.MessageBox.alert('show', '当前选中的' + data); }); ``` #### 五、Grid 的自定义功能扩展 除了基本的显示和交互外，ExtJs Grid还支持多种自定义功能，如添加行号、复选框选择模型、右键菜单等。这些功能的...