I'm trying to display an extjs-4 tree, the backing store is filled with json from an ajax call (which appears to be successful) but the tree does not show. Instead I get an error:
TypeError: t is null ext-all.js (line 38)
Edit: I'm now using ext-dev.js which gives the error:
TypeError: el is null at the line:
el = el.dom || Ext.getDom(el);
line 38 aside I was wondering if I have made any glaring errors in my 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
});
});
The json object that successfully returns is:
{"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"}]}]}
A stack trace using google chrome reveals:
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
How can I solve this?
I'm trying to display an extjs-4 tree, the backing store is filled with json from an ajax call (which appears to be successful) but the tree does not show. Instead I get an error:
TypeError: t is null ext-all.js (line 38)
Edit: I'm now using ext-dev.js which gives the error:
TypeError: el is null at the line:
el = el.dom || Ext.getDom(el);
line 38 aside I was wondering if I have made any glaring errors in my 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
});
});
The json object that successfully returns is:
{"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"}]}]}
A stack trace using google chrome reveals:
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
How can I solve this?
Share Improve this question edited Dec 3, 2012 at 10:20 Awalias asked Dec 3, 2012 at 9:36 AwaliasAwalias 2,1377 gold badges31 silver badges51 bronze badges 3-
1
What happens when you use
ext-dev.jsinstead ofext-all.js? IMO you should be using the former, rather than the latter, to find problems at this stage. – Joseph Victor Zammit Commented Dec 3, 2012 at 9:39 -
TypeError: el is nullatel = el.dom || Ext.getDom(el);– Awalias Commented Dec 3, 2012 at 9:42 - found the error! The div id had a different name between .js and .html. DOH! – Awalias Commented Dec 3, 2012 at 10:42
2 Answers
Reset to default 2Add HTML code below to Body of page :
<div id="viewer"></div>
I had a similar error TypeError: t() is null when migrating from javascript to typescript: I added index.tsx but forgot to delete the old index.js. The stack trace revealed that the old index.js was used.
The problem went away after deleting the old index.js.