Login Register

Setting a Dialog's Title dynamically

I've seen the question asked a number of times on how to set a Title on things like Dialog and TitlePane after parsing. There is currently no public method to do this, but it's uber easy, so lets take a peek:

the template for Dialog has something like:

${title}

in it. this attaches a "titleNode" attribute to our dijit. Its a pointer to the actual domNode where the text
is:

// what's the current title of the dialog? the innerHTML of the titlenode.
console.log(dijit.byIt("myDialog").titleNode.innerHTML);

So, we can do it easily in code by setting

dijit.byId("myDialg").titleNode.innerHTML = "new title!";

but that's a little grotty. We can dojo.extend() the dijit.Dialog class with a really simple method:

dojo.require("dijit.Dialog");
dojo.addOnLoad(function(){
    dojo.extend(dijit.Dialog,{
         setTitle: function(/*string*/title){
             this.titleNode.innerHTML = title || ""; 
         }
    });
});

now any dialog we make from this point on has a setTitle() method that you can use to alter it's title.

here's the complete example:



SetTitle Method for dijit.Dialog

	@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";



	dojo.require("dojo.parser");
	dojo.require("dijit.Dialog");
	dojo.require("dijit.form.Button");  

	dojo.addOnLoad(function(){
		dojo.extend(dijit.Dialog,{
			setTitle: function(title){
				this.titleNode.innerHTML = title; 
			}
		});

		var dialog = new dijit.Dialog({ title: "Start Title" },"node"); 
		dialog.startup();
		dialog.show();

	});



	
Lorem IPSUM! I am content, hear me roar. roar.
Set title dijit.byId('node').setTitle(dojo.byId('titleText').value);

The same principal can be applied to TitlePane. Just find the node with an attachPoint and ${title}, and modify the method to fit.

Hope this helps someone.