View Full Version : Extjs 4.1 bug? Error in calling tabpanel.render. Cannot call method 'writeTo' of nul

20 Jul 2012, 10:22 AM
In extjs 4.07 I was able to dynamically render a tabpanel to different div tag.
However, when I switch to 4.1 the same codes got "Cannot call method 'writeTo' of nul".
Is this a bug? What is the right way to switch render div tag in run time?
Thanks for your help.

Here is the codes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" type="text/css" href="ext-4.0.7/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.0.7/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="ext-4.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.1.0/bootstrap.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
var tabs = Ext.create('Ext.tab.Panel', {
width: 700,
height: 200,
title: 'Foo'
title: 'Bar'
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: 'btn',
handler: function() {
var div2 = Ext.query('#div2')[0];
tabs.rendered = false;


<div id='btn' style="width: 30px; height:25px"></div>
<div id='div1' style="width:700px; height: 200px; border: solid #99BCE8 1px; margin: 2px;"></div>
<div id='div2' style="width:700px; height: 200px; border: solid #99BCE8 1px; margin: 2px;"></div>


21 Jul 2012, 6:36 AM
Pretty sure that wouldn't count as a bug, you're abusing the render method quite badly.

I think the safest way would be to render containers to both divs and just move the tabpanel between them. The extra containers can be created/destroyed as and when you need them.

23 Jul 2012, 5:44 AM
From 4.1 document render method is to
Renders the Component into the passed HTML element.

Within tabpanel it could have many tabs and components.
I want to avoid the cost in recreating tabpanel or extra container in layouting.
How you move tabpanel from one container to another?

23 Jul 2012, 7:42 PM
Components should only ever be rendered once. This isn't new in 4.1, it's always been that way. You might have been able to trick it into multiple renders in that particular case but it was never correct usage.

Avoiding recreating the tabpanel sounds like a sensible idea to me but I'd say that trying to avoid the extra container isn't an optimization worth chasing in this case.

To move the tabpanel between containers you'd simply call remove and add methods on the containers. Make sure you pass false when calling remove to avoid it auto-destroying the tabpanel. The container itself would be rendered directly to the div using renderTo and once the tabpanel is moved you can destroy the old container.