首页 > Web开发 > 详细

ExtJS4.2 Grid知识点六:自动选中指定记录、自动选中全部记录、反向选择

时间:2014-08-19 02:11:53      阅读:314      评论:0      收藏:0      [点我收藏+]

本节主要学习ExtJS4.2 Grid自动选中指定记录、自动选中全部记录、反向选择,即在表格Grid加载数据后自动将符合条件的记录行选中,示例图片:

bubuko.com,布布扣


示例代码  /  在线演示


本例是通过监听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);	
        }
    }
}


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

bubuko.com,布布扣

本文出自 “Itdatum” 博客,请务必保留此出处http://itdatum.blog.51cto.com/1152235/1541809

ExtJS4.2 Grid知识点六:自动选中指定记录、自动选中全部记录、反向选择,布布扣,bubuko.com

ExtJS4.2 Grid知识点六:自动选中指定记录、自动选中全部记录、反向选择

原文:http://itdatum.blog.51cto.com/1152235/1541809

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!