本节主要学习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
ExtJS4.2 Grid知识点六:自动选中指定记录、自动选中全部记录、反向选择,布布扣,bubuko.com
ExtJS4.2 Grid知识点六:自动选中指定记录、自动选中全部记录、反向选择
原文:http://itdatum.blog.51cto.com/1152235/1541809