如何处理 ExtJs 中的异常“无法调用 null 方法 getRange”？答案

【问题标题】：How can I handle the exception "cannot call method getRange of null" in ExtJs?如何处理 ExtJs 中的异常“无法调用 null 方法 getRange”？
【发布时间】：2016-05-13 19:44:55
【问题描述】：

我已经在网上搜索了答案，但没有找到任何答案。希望你能帮忙。所以我对extJs 比较陌生。我在左侧有一个导航栏。当我按下第一个按钮时，会打开一个新窗口，其中包含一个表格并自动加载其数据。第一次它工作得很好，但是当我关闭窗口并再次打开它时，我收到错误“无法调用 null 方法 getRange”。

如果我打开第二个窗口（当我单击导航栏中的另一个按钮时），我有 4 个选项卡，每个选项卡都包含一个表格。每个选项卡都有一个带有按钮（创建、更改等）的工具栏。这里发生与第一个窗口相同的事情。我也可以将这些表打印为列表，第一次工作正常，但是当我取消打印操作时，我再次收到错误。

我确保所有按钮和表格都有不同的引用，所以我真的不知道这可能是什么。

有什么想法吗？

我添加了我的面板，这将在此处打开新窗口：

items: [
        {
            xtype: 'tabpanel',
            region: 'center',
            items: [{
                // 1. Tab
                xtype: 'componentTap-panel',
                title: UMA.Locale.rm.component.componentTitle,
                id: 'componentTab'
            }, {
                // 2. Tab
                title: UMA.Locale.rm.componentGroup.componentGroupTitle,
                xtype: 'componentGroupTap-panel',
                id: 'componentGroupTab'
            }, {
                // 3. Tab
                title: UMA.Locale.rm.componentTemplateTitle,
                xtype: 'componentTamplate-panel',
                id: 'componentTemplateTab'
            },
            {
                //4.Tab
                title: UMA.Locale.rm.inventoryTitle,
                xtype: 'inventoryTab-panel',
                id: 'inventoryTab'
            }
            ]
        }

]

当窗口打开时，我添加我的表格和工具栏：

items: [{
    xtype: 'toolbar',
    region: 'north',
    reference: 'componentToolbar',
    items: [{
        text: UMA.Locale.rm.buttonCreate,
        action: 'createComp'
    }, {
            text: UMA.Locale.rm.buttonChange,
            action: 'changeComp'
        }, {
            text: UMA.Locale.rm.buttonMove,
            action: 'moveComp'
        }, {
            text: UMA.Locale.rm.buttonDelete,
            action: 'deleteComp'
        },{
            text: UMA.Locale.rm.buttonPrint,
            action: 'print',
            margin: {
                left: 8

}, {
        xtype: 'componentTable-panel',
        region: 'center'
    }, {
        xtype: 'componentsFilter-panel',
        width: 300,
        region: 'east'
    }]

然后自动加载我的表格：

items:[{
    xtype: 'filtergrid',
    reference: 'componentGrid',
    paging: true,
    hideHeaders: false,
        region: 'center',
        selModel: new Ext.selection.RowModel({
                mode: "MULTI"
        }),

        store: {
            model: 'Component',
            autoLoad: true
        },

        columns: [{ ...

【问题讨论】：

由于getRange() 是按钮处理程序中某处的存储方法（正如我从您的问题中理解的那样），您使用存储实例进行操作，其引用变量包含null。因此，请尝试将 console.log 存储在您的处理程序中。如果您提供一些代码（摆弄这个错误会很有帮助）我们可以提供更具体的解决方案。
@SergeyNovikov 添加了一些代码，希望你理解
像这样帮助你会非常困难，你至少可以创建一个重现这个问题的小提琴（fiddle.sencha.com）吗？

标签： javascript exception extjs null runtime-error

【解决方案1】：

正如 Sergey Novikov 提到的那样，getRange() 是一种存储方法。我的网格商店也遇到了同样的错误，经过一次又一次的审查，我发现每当我关闭选项卡并再次重新打开它时，我都会得到两个网格视图实例（可以通过grid.getView() 检查）然后我得出的结论是，每当网格第二次创建时，网格视图的选择模型就有两个实例，因为我将selModel 的代码用作new Ext.selection.CheckboxModel({ showHeaderCheckbox: true, width: 50, mode: 'MULTI' })

然后我将selModel 的代码更改为

selModel: { selType: 'checkboxmodel', showHeaderCheckbox: true, width: 50, mode: 'MULTI' }

错误对我来说已经消失了。希望这会帮助你。 :)

【讨论】：

【解决方案2】：

使用Object() 构造函数来测试对象是否是三个子类型之一：

空对象
对象对象
数组对象

例如：

function foo() { return {"hi":"bye" } }
function bar() { return null }
function baz() { return [1,2,3] }

function testObject(myObject)
  {
  if (Object(myObject).hasOwnProperty("0") )
    {
    /* Call getRange */
    return 'yes';
    }
  else
    {
    /* throw an exception */
    return 'no';
    }
  }

console.log(testObject(foo()), testObject(bar()), testObject(baz()) );

【讨论】：