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);	
        }
    }
}

 

点击“反向选择”按钮后结果图片如下