View Full Version : How do I get Div update to render?

1 Nov 2010, 8:26 AM
I have this line of code which successfully modifies the DOM but how do I get ExtJS to refresh the panel display on the browser:


Here is the code in context:

HR.HeaderPanel = Ext.extend(Ext.Panel, {
layout : 'fit',
region : 'north',
bodyCssClass: 'x-panel-mc',
height : 50,
margins : '0 0 0 10',
border : false,
html : '<div style="float: left"></div> \
<div id="hr_title">Human Resources</div> &nbsp;\
<div id="hr_logout">Login</div>',
initComponent: function () {
this.listeners = {
scope: this,
afterrender: this.onAfterRender

onAfterRender: function () {
var wrapper = Ext.fly("hr_logout");
wrapper.on("click", function (e) {
var loginWrap = Ext.fly("hr_logout");
if (loginWrap.dom.innerHTML == "Login") {
alert(loginWrap.dom.innerHTML); // just checking if DOM change successful

1 Nov 2010, 12:00 PM
If your dom node is rendered and you change it's innerHTML property, you should see the changes reflected on screen. I notice that you are storing references returned by the Ext.fly method. Without getting in details (you can read about this later), you should never do this as it can produce unpredicted results. Your problem is probably because of this.

//This is wrong!
var loginWrap = Ext.fly("hr_logout");

//this is right
var loginWrap = Ext.get('hr_logout');

//this is good also

1 Nov 2010, 12:03 PM
Ext.fly is not really wrong, but it should only be used when you need the element once and not for several things.

1 Nov 2010, 12:09 PM
Well, if you store a reference to the instance of Ext.Element returned by Ext.fly and you call some other ext functions that might manipulates the dom and internally make use of Ext.fly, then your initial reference might not point to the right object anymore so, it's a very bad practice to reference the Ext.fly returned Ext.Element, in my point of view...

1 Nov 2010, 12:30 PM
Thanks for the tip. I changed the Ext.fly method to Ext.get. I'm still not getting the desired result. The alert displays the updated innerHTML text "Logout", but on screen the text remains unchanged.

1 Nov 2010, 12:49 PM
Hum... I'am probably missing something... ?
@Condor, any idea?

Does that work for you?

Ext.onReady(function() {

var panel = new Ext.Panel({
title: 'test',
renderTo: document.body,
height: 100,
width: 100,
layout: 'fit',
html: '<div id="test">Login</div>',
listeners: {
'afterrender': function() {
var loginDiv = Ext.get('test');

'click': function() {
if (loginDiv.dom.innerHTML == 'Login')

1 Nov 2010, 10:57 PM
So you do get the correct innerHTML value back but it doesn't change on the screen?

That is only possible if you're not talking about the same element (are there two elements with id="test"?).

2 Nov 2010, 4:30 AM
Your test code helped fix the problem. I ran it and 3 test panels showed up .... ??

Turns out I had a fixed another problem incorrectly by changing the include order on my js class files and caused the "app" class to be initialized multiple times. The first problem had to do with class names and namespace in particular the "app" class. Things are now working like they should after changing my code from this:


HR = function() {
var loginWin, deptView;

return {
init : function() {



Ext.onReady(HR.init, HR);

to this:


HR.app = function() {
var loginWin, deptView;

return {
init : function() {



Ext.onReady(HR.app.init, HR);