一列具有字符串数据和extjs4.1中的复选框答案

【问题标题】：one column having string data and check box in extjs4.1一列具有字符串数据和extjs4.1中的复选框
【发布时间】：2012-08-29 02:28:24
【问题描述】：

在我的网格中，我应该能够根据从 web 服务返回的状态来拥有复选框和字符串数据。现在我正在编写下面给出的自定义渲染器函数： function customcolumn1(value, metadata, record) {

    var completedTime = record.get('nccompletedTime');
    var completedByLastName = record.get('nccompletedByLastName');
    var completedByFirstName = record.get('nccompletedByFirstName');
    if (value == 'Completed') {
        return completedTime + " " + completedByLastName + "," + completedByFirstName;
    } else if (value == 'Pending') {
        return "<input type='checkbox' disabled>";
    } else if (value == 'Assigned') {
        return "<input type='checkbox'>";
    }
}

而网格是

var SAFjobgrid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [
        {
        text: "",
        width: 30,
        renderer: customSeqNumber,
        dataIndex: 'sequenceNumber'},
    {
        text: "Task",
        width: 350,
        renderer: customTask,
        dataIndex: 'label'},
    {
        text: "Complete",
        width: 160,
        renderer: customcolumn2,
        dataIndex: 'stampActionStatus'},
    {
        text: "Verified",
        width: 160,
        renderer: customcolumn,
        dataIndex: 'verifyActionStatus'},
    {
        text: "Non Compliance",
        flex: 1,
        renderer: customcolumn1,
        dataIndex: 'ncActionStatus'}

    ]
});

现在我想检查复选框并捕获这些记录的 stampIds。当我单击网格外部的更新按钮时，我应该能够使用捕获的 stampId 调用 web 服务。我试图把从渲染器函数返回时复选框上的 onclick 事件。但是我应该如何访问该记录的 stampId。如果我选择多个复选框，多个 stampid 应该转到 web 服务，如果我取消选中该复选框，相应的 stampid 应该从 stampId 中删除。谁能帮忙解决这个问题。。

【问题讨论】：

标签： html checkbox grid extjs4.1

【解决方案1】：

您可以查看 CheckColumn 用户扩展 http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ux.CheckColumn 但在您的情况下，您必须像这样覆盖 renderer 方法

renderer : function(value, meta, record){
    var cssPrefix = Ext.baseCSSPrefix,
        cls = [cssPrefix + 'grid-checkheader'],
        completedTime = record.get('nccompletedTime'),
        completedByLastName = record.get('nccompletedByLastName'),
        completedByFirstName = record.get('nccompletedByFirstName');

    if (value == 'Completed') {
        //render string instead of checkbox
        return Ext.String.format('{0} {1},{2}', completedTime, completedByLastName, completedByFirstName);
    }

    if (value === 'Assigned') {
        cls.push(cssPrefix + 'grid-checkheader-checked');
    }
    //render checkbox stub, 
    //it is actually a div element with special css classes to simulate checkbox
    return '<div class="' + cls.join(' ') + '">&#160;</div>';
}

要收集所有选中/未选中的行，您可以使用此存储方法http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.AbstractStore-method-getUpdatedRecords 它返回通过选中/取消选中此列更新的模型数组

【讨论】：