ExtJS-Cannot read property 'childNodes' of null

在使用ExtJS开发grid表格时,其中有一列嵌入了combo组件;代码如下:


{
            xtype: 'gridcolumn',
            menuDisabled: true,
            sortable: false,
            align: 'center',
            dataIndex: 'goodsName',
            text: '物品名称',
            width: 100,
            editor: {
                xtype: 'combo',
                displayField: 'goodsName',
                valueField: 'id',
                hideTrigger: true,
                typeAhead: true,
                minChars: 1,
                store: {
                    xtype: 'store',
                    model: 'GoodsComboBoxModel',
                    proxy: {
                        type: 'ajax',
                        url: 'allGoodslistByName.action',
                        reader: {
                            type: 'json',
                            root: 'array',
                            totalProperty: 'total'
                        }
                    },
                    autoLoad: false
                },
                listeners: {
					'change': function(){...},
					'select': function(){...},
					'focus': function(){...}
						},
            renderer: function (value, metaData) {
                if (null != value && "" != value) {
                    metaData.tdAttr = 'data-qtip = ' + value.replace(/\s+/g, "");//Cannot read property 'childNodes' of null
                    metaData.style = 'white-space:normal;word-break:break-all;';
                }
                return value;
            }
        },


注意看renderer渲染的函数,因为定义的combo的valueFeild是id,所以在这个列当中record col值应该是一个数字,但是这里定义的是物品名称,应该显示id对应的物品名称;当然有的人会想为什么不讲valueField定义为goodsName,这样似乎更加简单;这里是因为有其他原因,所以要定义为ID,这里不讨论这个;问题就出在函数中:
metaData.tdAttr = 'data-qtip = ' + value.replace(/\s+/g, "");
这个主要是长字符串需要使用到这个; value就是qtip要显示的字符串;
将这段代码注释以后,再次测试无问题;
我这里是将这段代码改为其他代码来显示goodsName字符串;
网上也有说是因为record中字段值为null,想这种问题,网上的只能做参考,帮你排除;当行不通时还是需要打断点耐心去寻找到问题,这样才是解决问题的根本

### JavaScript 中 `Cannot read property 'focus' of null` 错误解决方案 此错误通常发生在尝试调用一个未定义或为 `null` 的对象的方法时。具体来说,在代码中某处可能试图对一个不存在的对象调用 `.focus()` 方法。 #### 原因分析 当某个 DOM 元素被赋值给一个变量,而该变量随后变为 `null` 或者从未成功获取到目标元素,则对该变量调用任何方法都会引发此类错误[^1]。例如: ```javascript let element = document.getElementById('nonExistentElement'); element.focus(); // 如果找不到 ID 为 nonExistentElement 的元素,则会抛出错误 ``` 上述代码片段中,如果页面上没有名为 `nonExistentElement` 的元素,那么 `document.getElementById('nonExistentElement')` 将返回 `null`,进而导致运行时错误。 --- #### 解决方案 ##### 方案一:检查是否存在目标对象后再操作 在调用 `.focus()` 方法之前,先验证目标对象是否有效(即不为 `null`)。可以通过条件语句实现这一点: ```javascript let element = document.getElementById('targetElement'); if (element !== null && typeof element === 'object') { element.focus(); } else { console.error("无法找到指定的DOM元素"); } ``` 通过这种方式可以防止程序崩溃并提供更友好的调试信息[^3]。 ##### 方案二:使用可选链运算符 (`?.`) 现代浏览器支持 ES2020 可选链语法,允许开发者安全地访问深层嵌套属性而不必担心中间节点为空的情况。对于本例而言,可以用它简化判断过程: ```javascript const element = document.getElementById('targetElement'); element?.focus(); // 若 element 是 null 则不会执行 focus() ``` 这种方法不仅简洁明了而且减少了冗余代码量[^4]。 ##### 方案三:确保动态更新后的上下文中仍然存在所需元素 某些情况下,特别是涉及表格组件如 grid/treegrid 使用 actioncolumn 进行交互之后重新加载数据源 store ,可能导致原引用失效从而触发异常 。因此建议采取措施保持一致性或者重置相关状态 : - **刷新前保存必要信息** :记录当前活动项索引或者其他唯一标识以便后续恢复位置。 - **延迟绑定事件处理函数** : 确认视图完全渲染完毕再附加监听器。 以下是基于 ExtJS 场景的一个例子演示如何规避这类风险: ```javascript // 删除动作完成后等待一段时间让界面完成调整 setTimeout(() => { const activeCell = getActiveCellAfterRefresh(); // 自定义逻辑获取新的激活单元格 if(activeCell){ activeCell.focus(); } }, 50); ``` 这里假设有一个辅助方法能够准确判定最新有效的聚焦点是什么样式的结构取决于实际框架设计模式. --- ### 总结 为了妥善应对 “Cannot read property 'focus' of null”,可以从多个角度出发解决问题,包括但不限于增加前置校验、采用新型语言特性以及优化整体架构流程等方面入手。最终目的是保障应用稳定性的同时提升用户体验质量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值