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

點擊“反向選擇”按鈕後結果圖片如下