在Grid的中使用了CheckboxSelectionModel的时候会发现,在当前页选中了全选按钮,再点击分页按钮时,在新的一页里,header上的全选按钮还是处于选择状态的,下面演示一个笨一点方法:
1、在store里加入监听数据变化事件
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:url,form:ff,method:'post'}),
totalProperty:"totalCount",
// 这里添加监听数据变化的事件,如果数据发生变休,触发清空checkbox函数
listeners:{datachanged:clearAllSelectedCheckbox},
reader:new Ext.data.JsonReader(
{ root:'result',
id:'id',
totalProperty: 'totalCount'
},
[
{name:"id"},
{name:"remark"},
{name:"domain"},
{name:"name"}
)});
2、Grid的columns 和生成grid部分的代码就不在这里写了,跟正常情况下的写法一致,分页栏PagingToolbar。
3、clearAllSelectedCheckbox实现代码:
function clearAllSelectedCheckbox(){
var hd = Ext.fly(grid.getView().innerHd).child('div.x-grid3-hd-checker');
hd.removeClass('x-grid3-hd-checker-on');
grid.getSelectionModel().clearSelections();
}
还可以通过重写PagingToolbar来实现。
分享到:
相关推荐
5. **监听事件**:你还可以通过监听`checkchange`事件来控制全选行为,当全选复选框状态改变时,阻止其默认操作。 6. **自定义模板**:如果你需要保留全选功能但希望自定义其行为,可以使用自定义列头模板,通过`...
// 当选中行时,触发获取选中记录的函数 }); ``` #### 五、总结 本文介绍了如何在ExtJs Grid中实现多选功能以及如何获取选中的所有值。通过使用`CheckboxSelectionModel`,我们可以轻松地为Grid添加多选功能,并...
当用户点击一个复选框时,事件处理器会检查该行是否为层级结构中的父节点,并相应地改变其子节点的状态。 2. **数据绑定**:为了实现级联选择,控件需要知道每个行的数据模型中是否有表示层级关系的字段,比如`...
- 当用户选中某条记录时,可以通过工具栏中的编辑按钮或双击记录来启动编辑模式。 - 显示表单供用户修改数据,完成后调用`editUrl`进行更新。 4. **查询记录** - 初始化Grid时,通过`storeUrl`获取数据列表并...
在`handler`方法中,我们可以监听点击事件,获取到当前选中的行和列,从而执行相应的操作。 在PHP端,我们需要创建一个接收前端请求的控制器(如`index.php`),根据HTTP请求的方法(GET、POST、PUT、DELETE)来...
通过`Ext.grid.plugin.CellEditing`插件,点击单元格时显示编辑器,完成数据修改后自动保存。 ### 对话框的使用 `Ext.window.Dialog`或`Ext.MessageBox`提供弹出式对话框,用于信息提示、确认操作、输入等。 ### ...
2. **使用CheckboxSelectionModel**:这是另一种实现复选框选择的方式,通过实例化`Ext.grid.CheckboxSelectionModel`并将其添加到表格配置的`sm`属性中。这种模式支持多选,并且可以轻松地获取所有被选中的行记录。...
首先,我们来看一下问题的核心:在使用Coolite的`Confirm()`方法时,可能无法获取到用户所选择的具体内容。为了解决这个问题,我们可以自定义一个方法来处理确认过程。 在界面上,我们可以创建一个按钮,如以下所示...
//得到选择所有行 //注:如果不声明var sm = new Ext.grid.CheckboxSelectionModel();则会报此句没有该对象或属性 Var selectRows = grid.getSelectionModel().getSelections(); selectRows[0].get(“gird中某列的...
例如,如果需要模拟用户在输入框中输入值后按下Enter键进行搜索,可以先将焦点移动到输入框,输入值,然后模拟按下“@”键(`\40`是ASCII码表示的'@'),稍作延迟,最后使用`keyPressNative()`模拟Enter键的按下。...
为了在表格中添加CheckBox选中功能,我们需要创建一个CheckboxSelectionModel实例,并将其添加到ColumnModel中: ```javascript var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid....
3. **应用至GridPanel**:在创建GridPanel时,通过`sm`属性传入CheckBoxSelectionModel: ```javascript var grid = new Ext.grid.GridPanel({ el: 'grid3', ds: ds, cm: cm, sm: sm, // 应用...
例如,当用户点击“修改”按钮后未对表单做任何改动就尝试提交时,就不需要再次进行提交。 另外需要注意的是,当 `form` 与 `EditorGridPanel` 结合使用时,应当特别注意表单的状态管理,确保每次提交都是有意义的...
在创建CheckboxSelectionModel时,我们传入了一个配置对象,其中包含一个handleMouseDown属性,并设置为Ext.emptyFn(空函数)。这是为了在ExtJS的旧版本中避免在使用checkcolumn插件时可能出现的问题。 然后,我们...
3. **列配置**:EXT JS的列配置允许设置列的显示方式,如模板列(TemplateColumn)可以自定义显示内容,检查列(CheckboxSelectionModel)用于复选选择,编辑列(Editing)支持单元格级别的编辑。 4. **功能扩展**...
- `value`:多选时,值通常是一个数组,包含了所有选中项的值。 - `getValue()`和`setValue(values)`方法用于获取和设置多选值。 6. **用户交互优化**: - 可以通过`minWidth`和`maxHeight`设置下拉列表的最小...
每次用户翻页,`start`值会递增`limit`的值,以获取下一页的数据。 在服务器端,你需要根据`start`和`limit`来处理数据库查询,通常使用SQL的`LIMIT`和`OFFSET`子句来限制返回的记录范围。例如,如果你的数据库支持...
`enableRowBody` 配置项允许包含行的详细信息,当用户点击行时会显示额外的内容。 15. **index**: 当用于 GridView 相关的方法时,`index` 表示当前行的索引,可用于获取或操作特定行的数据。 以上就是 ExtJS 中...
扩展到更复杂的需求,例如在表格中添加CheckBox选中功能,可以创建一个CheckboxSelectionModel并将其添加到ColumnModel中: ```javascript var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid...