8 March 2011

How to solve problem with "ct is null" in extjs

So you start your amazing journey with extjs and you implement another amazing panel and then
instead of  see you brand new shiny panel you see N O T H I N G .. so you panic,but you know that your firebug will tell you the clue

"ct is null"

Sounds great but .... it doesn't mean anything. is it ?
so you looking to code again again... everything looks perfect but result is the same

"ct is null"
"ct is null" 
"ct is null"  

and you get mad and smash sceen and ask WHY?

ct is null means that Ext would love to render  to place which you specified (like div or body) but it couldn't find it..

First! Be sure that your Ext has :

(for example panel)
(...)


renderTo: document.body,   

    or

renderTo:  DivID,


It means in your html file is missing:
  •   <body></body> or 
  •   <div id="DivID"> but BUT need be DAMN SURE that you have DivID specified in ext and div need contain attribute DivID  
Below you have example how to implement panel correctly , that will be displayed (instead of  seeing in firebug error "ct in null")

Example (Fail Date With Girl Information Form):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>ExtJS test zone.</title>
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
 

<!-- REMINDER: use correct path to your ext-all.css -->
<script src="lib/extjs/adapter/ext/ext-base.js"></script>
<!-- REMINDER: use correct path to your ext-base.js -->
<script src="lib/extjs/ext-all-debug.js"></script>
<!-- REMINDER: use correct path to your ext-all-debug.js -->
<script>
Ext.onReady(function(){

var movie_form = new Ext.FormPanel({
renderTo: document.body,
//<-- MAKE SURE YOU ADD WHERE YOU RENDER
frame: true,
title: 'Fail Date With Girl Information Form',
width: 350,
items: [{
xtype: 'textfield',
fieldLabel: 'Name of girl',
name: 'title',
allowBlank: false,
maskRe: /[a-z]/,
listeners: {
specialkey: function(f,e){
if (e.getKey() == e.ENTER) {
Ext.Msg.alert('Hello', 'World');
}
}}
},{
xtype: 'checkbox',
fieldLabel: 'Epic fail?',
name: 'is it crap?'
},{
xtype: 'htmleditor',
fieldLabel: 'Explanation of what went wrong this time:',
name: 'editor',
hideLabel: true,
height: 100,
anchor: '100%'
},{
xtype: 'datefield',
fieldLabel: 'Date of humiliation',
name: 'released',
disabledDays: [1,2,3,4,5]
}]
});
});
</script>
</head>


<body> <!-- MAKE SURE YOU ADDED DESTINATION PLACE LIKE BODY(OR DIV) WHERE EXT WILL RENDER AMAZING PANEL -->
</body>

</html>


Have fun !