DOMINIK SYMONOWICZ's IT NOTES BLOG: 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"

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" />


<script src="lib/extjs/adapter/ext/ext-base.js"></script> 
<script src="lib/extjs/ext-all-debug.js"></script> 
<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> 
</body>

</html>

Have fun !

8 March 2011

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

1 comment: