extjs7 store重新加载导致异常

7.4.0 classic

grid/treegrid使用actioncolumn或其他能获得焦点的单元格元素交互后，刷新store,如果操作的目标行不在新数据中（例如actioncolumn中按钮执行删除操作，异步提交后刷新store）,将报错如下

Uncaught TypeError: Cannot read properties of null (reading ‘focus’) at constructor.setActionableMode (Table.js?_dc=1640829487431:4262) at constructor.setActionableMode (Table.js?_dc=1640829487431:2744) at constructor.onFocusLeave (Table.js?_dc=1640829487431:2438) at constructor.onGlobalFocus (ComponentManager.js?_dc=1640829487428:315) at constructor.fire (Event.js?_dc=1640829487428:523) at constructor.doFireEvent (Observable.js?_dc=1640829487428:884) at constructor.prototype.doFireEvent (EventDomain.js?_dc=1640829487428:302) at constructor.fireEventArgs (Observable.js?_dc=1640829487428:717) at constructor.fireEvent (Observable.js?_dc=1640829487428:664) at constructor.processFocusIn (Focus.js?_dc=1640829487430:121)

删除操作提交成功后，使用store.remove(recordRemoved)将已删除数据从store中移出，如有需要（远端分页查询场景）在执行store.load()

• load后会根据此前焦点的行记录重新定位焦点 但是记录已经不存在，源码没有重新校验导致定位焦点异常 ext-classic/src/view/Table.js

/**
 * 
 * @param {Boolean} enabled
 * @param {Ext.grid.CellContext} position The cell to activate.
 * @param {HTMLElement/Ext.dom.Element} [position.target] The element within the referenced
 * cell to focus.
 * @return {Boolean} Returns `false` if the mode did not change.
 * @private
 */
setActionableMode: function(enabled, position) {
    var me = this,
        navModel = me.getNavigationModel(),
        actionables = me.grid.actionables,
        len = actionables.length,
        isActionable = false,
        activeEl, record, column, lockingPartner, cell, i;

    // No mode change.
    // ownerGrid's call will NOT fire mode change event upon false return.
    if (me.actionableMode === enabled) {
        // If we're not actionable already, or (we are actionable already at that position)
        // return false.
        // Test using mandatory passed position because we may not have an actionPosition
        // if we are  the lockingPartner of an actionable view that contained
        // the action position.
        //
        // If we being told to go into actionable mode but at another position,
        // we must continue. This is just actionable navigation.
        if (!enabled || position.isEqual(me.actionPosition)) {
            return false;
        }
    }

    // If this View or its lockingPartner contains the current focus position,
    // then make the tab bumpers tabbable and move them to surround the focused row.
    if (enabled) {
        if (position && (position.view === me ||
            (position.view === (lockingPartner = me.lockingPartner) &&
            lockingPartner.actionableMode))) {
            isActionable = me.activateCell(position);
        }

        // Did not enter actionable mode.
        // ownerGrid's call will NOT fire mode change event upon false return.
        return isActionable;
    }
    else {
        // Capture before exiting from actionable mode moves focus
        activeEl = Ext.fly(Ext.Element.getActiveElement());

        // Blur the focused descendant, but do not trigger focusLeave.
        // This is so that when the focus is restored to the cell which contained
        // the active content, it will not be a FocusEnter from the universe.
        if (me.el.contains(activeEl) && !Ext.fly(activeEl).is(me.getCellSelector())) {
            // Row to return focus to.
            // 此处会获取到此前操作焦点的行记录
            record =
                (me.actionPosition && me.actionPosition.record) || me.getRecord(activeEl);

            column = me.getHeaderByCell(activeEl.findParent(me.getCellSelector()));

            cell = position && position.getCell(true);

            // Do not allow focus to fly out of the view when the actionables
            // are deactivated (and blurred/hidden). Restore focus to the cell in which
            // actionable mode is active.
            // Note that the original position may no longer be valid, e.g. when the record
            // was removed.
            if (!position || !cell) {
            	// 重新根据record获取position和cell后没有校验，此时position.rowIdx=-1,cell=flase
                position =
                    new Ext.grid.CellContext(me).setPosition(record || 0, column || 0);

                cell = position.getCell(true);
            }

            // Ext.grid.NavigationModel#onFocusMove will NOT react and navigate
            // because the actionableMode flag is still set at this point.
            Ext.fly(cell).focus();

            // Let's update the activeEl after focus here
            activeEl = Ext.fly(Ext.Element.getActiveElement());

            // If that focus triggered handlers (eg CellEditor after edit handlers) which
            // programmatically moved focus somewhere, and the target cell has been
            // unfocused, defer to that, null out position, so that we do not navigate
            // to that cell below.
            // See EXTJS-20395
            if (!(me.el.contains(activeEl) && activeEl.is(me.getCellSelector()))) {
                position = null;
            }
        }

        // We are exiting actionable mode.
        // Tell all registered Actionables about this fact if they need to know.
        for (i = 0; i < len; i++) {
            if (actionables[i].deactivate) {
                actionables[i].deactivate();
            }
        }

        // If we had begun action (we may be a dormant lockingPartner),
        // make any tabbables untabbable
        if (me.actionRow) {
            me.actionRow.saveTabbableState({
                skipSelf: true,
                includeSaved: false
            });
        }

        if (me.destroyed) {
            return false;
        }

        // These flags MUST be set before focus restoration to the owning cell.
        // so that when Ext.grid.NavigationModel#setPosition attempts to exit
        // actionable mode, we don't recurse.
        me.actionableMode = me.ownerGrid.actionableMode = false;
        me.actionPosition = navModel.actionPosition = me.actionRow = null;

        // Push focus out to where it was requested to go.
        if (position) {
            navModel.setPosition(position);
        }
    }
},

• 执行remove操作后，会自动释放焦点 此后在执行load操作则不会报错。 ext-classic/src/view/AbstractView.js

onRemove: function(store, records, index) {
    var me = this,
        rows = me.all,
        currIdx, i, record, nodes, node, restoreFocus;

    if (me.rendered && !me.refreshNeeded && rows.getCount()) {
        if (me.dataSource.getCount() === 0) {
            me.refresh();
        }
        else {
            // If this view contains focus, this will return
            // a function which will restore that state.
            restoreFocus = me.saveFocusState();

            // Just remove the elements which corresponds to the removed records
            // The tpl's full HTML will still be in place.
            nodes = [];

            for (i = records.length - 1; i >= 0; --i) {
                record = records[i];
                currIdx = index + i;

                if (nodes) {
                    node = rows.item(currIdx);
                    nodes[i] = node ? node.dom : undefined;
                }

                if (rows.item(currIdx)) {
                    me.doRemove(record, currIdx);
                }
            }

            me.fireItemMutationEvent('itemremove', records, index, nodes, me);

            // If focus was in this view, this will restore it
            // 此处释放焦点
            restoreFocus();
            me.updateIndexes(index);
        }

        // Ensure layout system knows about new content size
        me.refreshSizePending = true;
    }
},