PDA

View Full Version : 'null' is null or not an object ext-all.js



johnbritto.a
14 Oct 2011, 11:55 PM
Hello Everyone,
I get this "'null' is null or not an object ext-all.js" error please tell me i have gone wrong!!!!. I am desperate to know it.

Ext.require('Ext.tab.*');
Ext.onReady(function(){
var tabPanel = new Ext.TabPanel({
region:'center',
deferredRender:false,
autoScroll: true,
margins:'0 4 4 0',
activeTab:0,
items:[{
id:'tab1',
contentEl:'tabs',
title: 'Main',
closable:false,
autoScroll:true
}]
});
new Ext.Viewport({
layout: 'border',
defaults: {
animCollapse: true,
autoScroll: true
},
items: [{
contentEl: 'app-north-panel',
height: 100,
collapsible: true,
collapseMode: 'mini',
margins: '5 0 0 0',
maxSize: 500,
minSize: 100,
split: true,
autoScroll: false,
region: 'north'
}, {
contentEl: 'app-south-panel',
height: 70,
region: 'south',
collapsible: true,
collapseMode: 'mini',
margins: '0 0 5 0',
maxSize: 500,
minSize: 100,
split: true,
autoScroll: false
}, {
contentEl: 'app-west-panel',
//collapseMode: 'mini',
collapsible: true,
margins: '0 0 0 5',
maxSize: 500,
minSize: 100,
region: 'west',
split: true,
title: 'Navigation',
width: 275
},tabPanel]
/*{
contentEl: 'app-center-panel',
region: 'center',
title: document.title,
xtype: 'container',
items: [tabs]
}*/
});
});

mankz
16 Oct 2011, 3:24 AM
Please post code properly indented in code tags.

bt_bruno
16 Oct 2011, 7:29 AM
Hi @johnbritto.a.

Yeah, @mankz is right... posting code as plain text makes things difficult for us :/

Look, when you find a error, try to use ext-all-debug.js, and not ext-all.js. The debug version can give more accurate information about errors.

Using your code and ext-all-debug.js I got the error:


contentEl is null

There are several cases in your code that you inform the property contentEl, for instance:


contentEl: 'tabs',
contentEl: 'app-north-panel',
contentEl: 'app-south-panel',
contentEl: 'app-west-panel',

Make sure all this elements really exists in your HTML. If not, you can simple remove, as I did, and the viewport is rendered properly without errors.

Let us know if it worked for you.
Cheers!

johnbritto.a
16 Oct 2011, 7:46 PM
Hello Guys,
Thank You for your responses. And sorry for posting my code as a plain text without indentations. @bt_bruno, your idea worked as a charm. I was trying to integrate ExtJS layout to Oracle Apex page template. And now its all done and working. Well one more question, is there anyway i could create a tree structure with regards to a tree structure. Thank You again.

Thanks and Regards,
John Britto

bt_bruno
17 Oct 2011, 1:56 AM
What do you mean with "create a tree structure with regards to a tree structure"? You can probably go by using the Ext.tree.Panel (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.Panel) class, but it would require a data structure as documented (also check this tree example (http://docs.sencha.com/ext-js/4-0/#!/example/tree/check-tree.html)). I don't believe there's a easy way to point tree.Panel to a HTML tree structure and have it all converted to an Ext view, if that was what you meant.

johnbritto.a
17 Oct 2011, 3:08 AM
Hello @bt_bruno,

I am so sorry for my mistyping my question. My actual question is, Is there anyway i could create a tree structure using a oracle sql query, so that the tree gets updated if any changes happens in database.

Thanks
John Britto

bt_bruno
17 Oct 2011, 4:04 AM
Yes, for sure. It would be probably better to address the question to Ext JS 4 Discussion, or maybe a new question. But basically you would have to built the tree first, consuming a JSON generated by the Oracle SQL Query. The easy path would follow the official examples.

Concerning updating the tree when a database change occurs, you can use Ext.util.TaskRunner (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.util.TaskRunner) to have a task reloading the tree, polling the server-side for changes. There's actually no easy way to have the server starting the communication (would characterize reverse ajax or comet), generally we have the client polling for changes.