在网格面板中动态更改 extjs 4 网格文本框背景颜色

Posted 2023-02-26

【中文标题】在网格面板中动态更改 extjs 4 网格文本框背景颜色

【英文标题】：Dynamically change extjs 4 grid textbox background color in grid panel

【发布时间】：2014-04-08 16:54:36

【问题描述】：

我对某些网格组件（rangeFrom 和 rangeTo）进行了自定义验证

如果任何验证失败，我想将 markDirty 设置为 true，以便将无效的字段显示为错误状态，并且用户可以看到哪个字段是错误的。

if (record.get("type") === "ROW_HEIGHT" && record.get("apply_before") === true)
    
        var rangeFrom = record.get("range_from");
        var rangeTo = record.get("range_to");           

        if ((rangeFrom !== "") && (rangeTo !== "")) 
            if ((rangeFrom.match(/[^0-9]+$/) !== null) || (rangeTo.match(/[^0-9]+$/) !== null)) 
                if (rangeFrom.match(/[^0-9]+$/) !== null)

                                    **MARK rangeFrom Dirty here**   

                
                isValid = false;
            
            else if (rangeFrom > rangeTo) 
                isValid = false;
            
            else if ((rangeFrom < "2") || (rangeTo < "2"))
                isValid = false;
        
        else if ((rangeFrom === "") || (rangeTo === "") || (rangeFrom === null) || (rangeTo === null)) 
                isValid = false;
            
        else
            isValid = true;

基本上，任何时候验证失败（当 isValid = false 时）我都想将 rangeFrom 或 rangeTo 标记为脏，具体取决于哪个字段包含无效值。

当前验证接受任何数字 >= 2 的条目，如果没有输入任何内容（空白/空）或数字之外的任何内容 >= 2，则该字段应标记为脏。

【参考方案1】：

您需要 td 单元格作为记录字段，然后添加以下类 x-grid-dirty-cell：

var node = grid.getView().getNode(record);
Ext.query('td:nth-child(x)', node).className += ' x-grid-dirty-cell'; // x is the column-index

【讨论】：

这是否应该按原样工作，插入“MARK rangeFrom Dirty here”的位置？因为要么我对如何使用这个代码 sn-p 感到困惑，要么它不起作用。

另外，有关更多信息，上面的代码包含在自定义保存函数中...如果这很重要...因此在按下保存按钮之后进行验证，但在进行数据库调用。如果验证失败，则中止保存。

不，它不会起作用，var grid 应该是对你网格的引用。

【参考方案2】：

我找到了我的问题的答案。这是我在网格组件内进行单元格验证的方式。这将检查验证并将网格中的单个单元格标记为无效

        if (record.get("type") === "ROW_HEIGHT" && record.get("apply_before") === true)
    
        var rangeFrom = record.get("range_from");
        var rangeTo = record.get("range_to");
        if ((rangeFrom !== "") && (rangeTo !== "")) 
            if ((rangeFrom.match(/[^0-9]+$/) !== null) || (rangeTo.match(/[^0-9]+$/) !== null)) 
                var store = MrEditor.excelLayout.overrideColumnGrid.getStore();
                var view = MrEditor.excelLayout.overrideColumnGrid.getView();
                var error = false;
                var rangeFromFailed = false;
                var rangeToFailed = false;
                var columnLength = MrEditor.excelLayout.overrideColumnGrid.columns.length;
                    for (var i = 0; i < columnLength; i++) 
                        var cell = view.getCellByPosition(row: idx, column: i);
                        cell.removeCls("x-form-invalid-field");
                        cell.set('data-errorqtip': '');
                        var fieldName = MrEditor.excelLayout.overrideColumnGrid.columns[i].dataIndex;
                        if (fieldName === 'range_from') 
                            rangeFromFailed = false;
                            if (rangeFrom.match(/[^0-9]+$/) !== null)
                                rangeFromFailed = true;
                            if (rangeFromFailed) 
                                cell.addCls("x-form-invalid-field");    //add default invalid styling to fcell in error state
                                cell.set('data-errorqtip': 'Range From must be NUMERIC');   //custom error message
                                error = true;
                            
                        
                        else if (fieldName === 'range_to') 
                            rangeToFailed = false;
                            var cell = view.getCellByPosition(row: idx, column: i);
                            if (rangeTo.match(/[^0-9]+$/) !== null)
                                rangeToFailed = true;
                            if (rangeToFailed) 
                                cell.addCls("x-form-invalid-field");    //add default invalid styling to fcell in error state
                                cell.set('data-errorqtip': 'Range To must be NUMERIC'); //custom error message
                                error = true;
                            
                        
                    
                isValid = false;