Extjs checkcolumn 禁用某些行，基于值

Posted 2023-02-22

【中文标题】Extjs checkcolumn 禁用某些行，基于值

【英文标题】：Extjs checkcolumn disable for some rows, based on value

【发布时间】：2012-04-19 23:41:13

【问题描述】：

我有一个带有校验列的网格。例如，它的 dataIndex 是 'checked'。

我想禁用或隐藏某些行的复选框，其中另一个值，例如“can_be_checked”，为假/空。

Renderer 已经在 checkcolumn 中定义，弄乱它会破坏复选框的生成。

我该怎么做？

【参考方案1】：

您可以在渲染器中隐藏复选框，例如：

column.renderer = function(val, m, rec) 
    if (rec.get('can_be_checked') == 'FALSE'))
        return '';
    else
        return (new Ext.ux.CheckColumn()).renderer(val);
;

【讨论】：

但是渲染器已经在 checkcolumn 中定义了。我不想丢失或重复这段代码，它可以在较新版本的 extjs 中修改。 docs.sencha.com/ext-js/4-0/source/…

+1 - 正在寻找一种方法来安全地“呈现”复选框，而不会在字段中获得“真”或“假”。谢谢。

它运行并且一些记录没有它应该的 CheckColumn。但是，我无法编辑此列。有复选框，但我无法更改其值。可以编辑其他充满检查列的列。这有什么问题？是初始化问题吗？

我已经应用了解决方案，我添加了侦听器“checkchange”，当我单击该列时，fn 选项返回已检查 = true，即使复选框被隐藏。任何帮助...

使用这个答案，Ext.ux.CheckColumn() 将在您每次呈现检查列但不重新呈现时创建。为了避免这种情况，我们需要返回 defaultRenderer。我已经在下面发布了我的答案。

【参考方案2】：

我一直在寻找解决方案并遇到了这个问题，但在任何地方都没有可行的解决方案来显示禁用的复选框，而不是其他答案中涵盖的 NO 复选框。这有点涉及，但这是我所做的（对于 4.1.0）：

我发现 extjs\examples\ux\css\CheckHeader.css 文件 被Ext.ux.CheckColumn 使用没有禁用类，所以我 必须将其修改为更像标准复选框样式 包含在 ext-all.css 中（其中确实包括一个禁用的复选框 类）。

我不得不扩展 Ext.ux.CheckColumn 以防止事件发生 从禁用的复选框中触发。

最后，我必须提供自己的渲染器来应用禁用 按照我的逻辑上课。

代码如下。

修改 CheckHeader.css：

.x-grid-cell-checkcolumn .x-grid-cell-inner 
    padding-top: 4px;
    padding-bottom: 2px;
    line-height: 14px;

.x-grid-with-row-lines .x-grid-cell-checkcolumn .x-grid-cell-inner 
    padding-top: 3px;


.x-grid-checkheader 
    width: 13px;
    height: 13px;
    background-image: url('../images/checkbox.gif');
    background-repeat: no-repeat;
    background-color: transparent;
    overflow: hidden;
    padding: 0;
    border: 0;
    display: block;
    margin: auto;


.x-grid-checkheader-checked 
    background-position: 0 -13px;


.x-grid-checkheader-disabled 
    background-position: -39px 0;


.x-grid-checkheader-checked-disabled 
    background-position: -39px -13px;


.x-grid-checkheader-editor .x-form-cb-wrap 
    text-align: center;

上面的背景图片 url 指向这个通常随 extjs 4.1.0 一起提供的图片：extjs\resources\themes\images\default\form\checkbox.gif。

扩展的 Ext.ux.CheckColumn 类，以便不会从禁用的检查列中触发事件：

Ext.define('MyApp.ux.DisableCheckColumn', 
    extend: 'Ext.ux.CheckColumn',
    alias: 'widget.disablecheckcolumn',

    /**
     * Only process events for checkboxes that do not have a "disabled" class
     */
    processEvent: function(type, view, cell, recordIndex, cellIndex, e) 
        var enabled = Ext.query('[class*=disabled]', cell).length == 0,
            me = this;

        if (enabled) 
            me.callParent(arguments);
        
    ,

);

使用自定义渲染器实现根据我自己的逻辑应用禁用类：

column = 
    xtype: 'disablecheckcolumn',
    text: myText,
    dataIndex: myDataIndex,
    renderer: function(value, meta, record) 
        var cssPrefix = Ext.baseCSSPrefix,
            cls = [cssPrefix + 'grid-checkheader'],
            disabled = // logic to disable checkbox e.g.: !can_be_checked

        if (value && disabled) 
            cls.push(cssPrefix + 'grid-checkheader-checked-disabled');
         else if (value) 
            cls.push(cssPrefix + 'grid-checkheader-checked');
         else if (disabled) 
            cls.push(cssPrefix + 'grid-checkheader-disabled');
        

        return '<div class="' + cls.join(' ') + '">&#160;</div>';

    
;

【讨论】：

这可以很好地禁用，但我遇到了一个问题，即如果它已启用且未选中并且我检查了它，则样式保持不变且未选中。

我添加了这个 else cls.push(cssPrefix + 'x-grid-checkheader');它对我有用。谢谢，这对我帮助很大：P

【参考方案3】：

使用 extjs 5 更容易在渲染器方法中为目标复选框返回 defaultRenderer，为其他复选框返回 ''。

renderer: function (value, metaData, record) 
    return (record.isLeaf()) ? '' : this.defaultRenderer(value, metaData);

这样不会呈现复选框本身，但所有事件（即 checkchange、itemclick 等）都将保留。如果你也不想要它们，你可以在 beforesmth 事件中禁用它们，例如

onBeforeCheckRequestsChange: function(me, rowIndex, checked, eOpts) 
    var row = me.getView().getRow(rowIndex),
        record = me.getView().getRecord(row);
    return !record.isLeaf();
,

【讨论】：

这应该是正确的答案，因为被接受的答案可能会导致性能问题，因为创建的 CheckColumns 永远不会被破坏，从而增加 Ext.ComponentManager 和 DOM 大小以增加。

【参考方案4】：

我找到了使用 Aniketos 代码时复选框不可点击问题的解决方案，您必须确保在列的代码中指定 xtype: 'checkcolumn，这样就可以解决问题

【参考方案5】：

我也遇到了这个问题，为了更进一步，我需要在复选框上显示一个工具提示。这是我想出的解决方案，它似乎对现有的 checkcolumn 小部件侵入性最小...

renderer: function (value, metaData, record) 
    // Add a tooltip to the cell
    metaData.tdAttr = (record.get("someColumn") === "") ? 'data-qtip="A tip here"' : 'data-qtip="Alternate tip here"';

    if (record.get("someColumn") === "") 
        metaData.tdClass += " " + this.disabledCls;
    

    // Using the built in defaultRenderer of the checkcolumn
    return this.defaultRenderer(value, metaData);