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

Posted 2023-02-26

【中文标题】一列具有字符串数据和extjs4.1中的复选框

【英文标题】：one column having string data and check box in 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 中删除。 谁能帮忙解决这个问题。。

【参考方案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 它返回通过选中/取消选中此列更新的模型数组