在網格面板中動態更改extjs 4網格文本框背景顏色

Question

我對某些網格組件（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的任何條目，應將該字段標記為臟。

Answer 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

Answer 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;
            }