如何查询我的ExtJS网格以查看选中哪个CheckboxSelectionModel()复选框?

时间:2011-01-27 10:01:40

标签: extjs checkbox grid

我正在尝试使用具有复选框的ExtJS网格,我可以获取行/ ID的数组,以便我知道哪些行已被检查。

我已使用this example from Sencha来使选择复选框正确显示以下网格,但它没有显示如何从网格中获取信息哪些行已被显示检查,例如我将有一个具有处理函数的按钮,在这里我需要编写类似的东西:

var rowIdsChecks = grid.getRowIdsChecked();

如何从网格中获取当前检查过哪些行的信息?

var myData = [
    [4, 'This is a whole bunch of text that is going to be word-wrapped inside this column.', 0.24, '2010-11-17 08:31:12'],
    [16, 'Computer2', 0.28, '2010-11-14 08:31:12'],
    [5, 'Network1', 0.02, '2010-11-12 08:31:12'],
    [1, 'Network2', 0.01, '2010-11-11 08:31:12'],
    [12, 'Other', 0.42, '2010-11-04 08:31:12']
];

var myReader = new Ext.data.ArrayReader({}, [{
        name: 'id',
        type: 'int'
    }, {
        name: 'object',
        type: 'object'
    }, {
        name: 'status',
        type: 'float'
    }, {
        name: 'lastChange',
        type: 'date',
        dateFormat: 'Y-m-d H:i:s'
    }]);

var sm = new Ext.grid.CheckboxSelectionModel();

var grid = new Ext.grid.GridPanel({
    region: 'center',
    style: 'margin: 10px',
    store: new Ext.data.Store({
        data: myData,
        reader: myReader
    }),
    cm: new Ext.grid.ColumnModel({
        defaults: {
            width: 120,
            sortable: true
        },
        columns: [
            sm,
            {
                header: 'ID',
                width: 50,
                sortable: true,
                dataIndex: 'id',
                hidden: false
            },
            {
                header: 'Object',
                width: 120,
                sortable: true,
                dataIndex: 'object',
                renderer: columnWrap

            }, {
                header: 'Status',
                width: 90,
                sortable: true,
                dataIndex: 'status'
            },
            {
                header: 'Last Updated',
                width: 120,
                sortable: true,
                renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
                dataIndex: 'lastChange'
            }]
    }),
    sm: sm,
    viewConfig: {
        forceFit: true
    },
    title: 'Computer Information',
    width: 500,
    autoHeight: true,
    frame: true,
    listeners: {
        'rowdblclick': function(grid, index, rec){
            var id = grid.getSelectionModel().getSelected().json[0];
            go_to_page('edit_item', 'id=' + id);
        }
    }
});

解决方案:

感谢@jujule,此代码有效:

Ext.select('span#internal_link_001').on('click', function() {
    var selections = grid.getSelectionModel().getSelections();
    console.log(selections);
});

然后你就像这样 ids

enter image description here

2 个答案:

答案 0 :(得分:8)

CheckboxSelectionModel负责跟踪和管理选择。

只需使用其getSelections()方法获取所选记录数组:

grid.getSelectionModel().getSelections()

答案 1 :(得分:1)

如果已加载网格说a,则使用。

<script type="text/javascript" language="javascript">
function ValidateCheckBoxChecked() {
    var count = 0;
    var counter = 0;
    var ChkBoxValue;
    var checkboxList = document.getElementById("divGridData").getElementsByTagName("input");
    for (var i = 0; i < checkboxList.length; i++) {
        if (checkboxList[i].checked) {
            counter++;
        }
    }
    return counter; //this will return the number of checkBoxed checked.
}
</script>