首页 > 代码库 > ExtJS4.2 Grid知识点六:自动选中指定记录、自动选中全部记录、反向选择
ExtJS4.2 Grid知识点六:自动选中指定记录、自动选中全部记录、反向选择
本节主要学习ExtJS4.2 Grid自动选中指定记录、自动选中全部记录、反向选择,即在表格Grid加载数据后自动将符合条件的记录行选中,示例图片:
示例代码 / 在线演示
本例是通过监听Grid的afterrender事件来实现自动选择指定记录行,代码如下实现自动选中性别为男性的记录行:
自动选中指定记录代码
‘userlist‘: { afterrender: function(testGrid){//侦听goodslistview渲染 // 选中所有记录 //testGrid.getSelectionModel().selectAll(); var records=testGrid.getStore().getRange(); for(var i=0;i<records.length;i++) { var record=records[i]; if(record.get(‘type‘)==1) { testGrid.getSelectionModel().select(record,true); } } } }
自动选中全部记录代码
‘userlist‘: { afterrender: function(testGrid){//侦听goodslistview渲染 // 选中所有记录 testGrid.getSelectionModel().selectAll(); } }
在Grid顶部添加“反向选择”按钮,实现反向选择功能。
dockedItems: [{ xtype: ‘toolbar‘, items: [{ text:‘反向选择‘, tooltip:‘反向选择‘, action: ‘selectOthers‘ }] }]
给“反向选择”按钮添加事件,点击“反向选择”按钮可以取消选中当期已选中的记录,并同时选中当前所有未选中的记录。
‘userlist[id=testGrid] button[action=selectOthers]‘: { click: this.selectOthers } selectOthers: function(button) { var testGrid=Ext.getCmp(‘testGrid‘); var records=testGrid.getStore().getRange(); var selectModel=testGrid.getSelectionModel(); for(var i=0;i<records.length;i++) { var record=records[i]; if(selectModel.isSelected(record)) { selectModel.deselect(record); }else { selectModel.select(record,true); } } }
点击“反向选择”按钮后结果图片如下
本文出自 “Itdatum” 博客,请务必保留此出处http://itdatum.blog.51cto.com/1152235/1541809
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。