PDA

View Full Version : noob out of ideas for when Ext.get() returns null



stewardsencha
16 Nov 2010, 11:42 AM
New to extJS.
Planning a site-wise toolbar.
Created it with a few buttons using the designer. Very simple.



hankToolBarUi = Ext.extend(Ext.Toolbar, {
initComponent: function() {
this.items = [
{
xtype: 'button',
text: 'Home',
itemId: '',
id: 'btnHome'
},
...etc for a few more buttons



Created test html page. Took a few pints of blood but everything worked great:



<html>
<head>
<link rel="stylesheet" type="text/css" href="http://mysite.com/ext/resources/css/ext-all-notheme.css"/>
<link rel="stylesheet" type="text/css" href="http://mysite.com/ext/resources/css/xtheme-tobiuBrown.css"/>
<script type="text/javascript" src="http://mysite.com/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://mysite.com/ext/ext-all-debug.js"></script>

<script type="text/javascript" src="http://mysite.dev/api/hanktoolbar/hanktoolbar.ui.js"></script>
<script type="text/javascript" src="http://mysite.dev/api/hanktoolbar/hanktoolbar.js"></script>
<script>
Ext.onReady(function() {
Ext.QuickTips.init();
var toolMain = new hankToolBar({
renderTo: Ext.get('hanktoolbar')
});
var hankTld;
hankTld = ((m = location.host.match(new RegExp("\.([a-z,A-Z]{2,6})$") )) ? m[1] : 'com');
Ext.get('btnHome').on('click', function(){
window.open('http://mysite.'+hankTld);
});
Ext.get('btnChat').on('click', function(){
window.open('http://chat.mysite.'+hankTld);
});
Ext.get('btnShop').on('click', function(){
window.open('https://shop.mysite.'+hankTld);
});
Ext.get('btnVideos').on('click', function(){
Ext.Msg.alert('Videos', 'Everyone wants one.');
});
Ext.get('btnLogin').on('click', function(){
Ext.Msg.alert('Login', 'Everyone wants in.');
});
toolMain.show();
});
</script>

</head>
<body>
<div id="hanktoolbar"></div>
</body>
</html>


I am sure the business of creating the links this way is very wrong.
But that will come later and is not the question.

So now I move this test page from standalone-html into my app environment,
so the server is generating what I want, things are where I planned etc.

I broke the page. I've been staring at it for too long and have run out of ideas.

The html page produced in both cases is exactly the same.
Links are fully qualified so location of the script should not matter (?).

The failed case stops at Ext.get("btnHome") is null

Is there a checklist of stupid mistakes to look for when Ext.get() returns null?

After the page is loaded, I can see the element, so can firefox, it is there.
I'm trying to imagine why Ext cannot get it.

When I halt under the firefox debugger, to trace into Ext.get, I find the HTML tab
has nothing. So it seems onReady() is getting fired before the DOM is ready?

My eyes are bleeding from reading, and I think I am absorbing, but this has me stumped.
I think I am still missing something very basic.

Any hints much appreciated. Thank you.

stewardsencha
20 Nov 2010, 9:14 AM
Problem resolved. Un-related to extJS.
I think the answer to my question is: get a good night's sleep.