Javascript (ExtJS 4.1.1) TypeError: t is null答案

【问题标题】：Javascript (ExtJS 4.1.1) TypeError: t is nullJavascript (ExtJS 4.1.1) TypeError: t is null
【发布时间】：2012-12-03 09:36:43
【问题描述】：

我正在尝试显示一个 extjs-4 树，后备存储中充满了来自 ajax 调用的 json（这似乎是成功的），但树没有显示。相反，我得到一个错误：

TypeError: t is null    ext-all.js (line 38)

编辑：我现在正在使用ext-dev.js，它给出了错误： TypeError: el is null在线：

el = el.dom || Ext.getDom(el);

除了第 38 行之外，我想知道我是否在我的 javascript 中犯了任何明显的错误...

Ext.require([
    'Ext.tree.*',
    'Ext.data.*'
]);

Ext.onReady(function() {

    Ext.define('pools', {
        extend: 'Ext.data.Model',
        fields: ['text', 'id']
    });

    var store = Ext.create('Ext.data.TreeStore', {
        autoLoad: true,
        model: 'pools',
        proxy: {
            type: 'ajax',
            url: 'get_all',
            reader: 'json'
        }
    });

    store.load();

    // create the Tree
    var tree = Ext.create('Ext.tree.Panel', {
        store: store,
        rootVisible: false,
        viewConfig: {
            plugins: [{
                ptype: 'treeviewdragdrop'
            }]
        },
        height: 350,
        width: 400,
        title: 'Directory Listing',
        renderTo: 'viewer',
        collapsible: true
    });
});

成功返回的json对象为：

{"text": ".", "children": [{"text": "pool1", "id": "pool1", "children": [{"text": "pool1/vol01", "leaf": "true", "id": "pool1/vol01"}]}, {"text": "pool5", "id": "pool5", "children": [{"text": "pool5/vol", "leaf": "true", "id": "pool5/vol"}, {"text": "pool5/vol2", "leaf": "true", "id": "pool5/vol2"}]}]}

使用谷歌浏览器的堆栈跟踪显示：

Uncaught TypeError: Cannot read property 'dom' of null ext-dev.js:20437
Ext.define.doInsert ext-dev.js:20437
Ext.define.append ext-dev.js:17115
Ext.define.render Renderable.js:783
Ext.define.constructor AbstractComponent.js:1126
Base.implement.callParent ext-dev.js:6271
Ext.define.constructor Component.js:336
Base.implement.callParent ext-dev.js:6271
Ext.define.constructor Panel.js:144
constructor ext-dev.js:7459
(anonymous function)
Ext.ClassManager.instantiate ext-dev.js:8199
(anonymous function) ext-dev.js:3015
(anonymous function) viewer.js:26 <----------- from my javascript above (var tree=...)
(anonymous function) ext-dev.js:14498
Ext.util.Event.Ext.extend.fire ext-dev.js:14658
Ext.apply.readyEvent.event.fire ext-dev.js:14901
Ext.apply.fireReadyEvent ext-dev.js:14999
Ext.apply.onDocumentReady ext-dev.js:15023
fn ext-dev.js:10056
Ext.apply.triggerReady ext-dev.js:10042
Ext.apply.refreshQueue ext-dev.js:9540
Ext.apply.refreshQueue ext-dev.js:9541
Ext.apply.refreshQueue ext-dev.js:9541
Ext.apply.refreshQueue ext-dev.js:9541
Ext.apply.refreshQueue ext-dev.js:9541
Ext.apply.onFileLoaded ext-dev.js:9947
(anonymous function) ext-dev.js:3001
onLoadFn

我该如何解决这个问题？

【问题讨论】：

当您使用ext-dev.js 而不是ext-all.js 时会发生什么？ IMO 在这个阶段你应该使用前者而不是后者来发现问题。
TypeError: el is nullel = el.dom || Ext.getDom(el);
发现错误！ .js 和 .html 之间的 div id 名称不同。 DOH！

标签： javascript ajax json extjs

【解决方案1】：

将下面的 HTML 代码添加到页面正文：

<div id="viewer"></div>

【讨论】：

这实际上是我的问题！我在 div id 中打错字了！！然而，我真正的错是使用ext-all.js 进行开发

【解决方案2】：

从 javascript 迁移到 typescript 时，我遇到了类似的错误 TypeError: t() is null：我添加了 index.tsx，但忘记删除旧的 index.js。堆栈跟踪显示使用了旧的 index.js。删除旧的 index.js 后问题就消失了。

【讨论】：