jeviathon

Extending existing components to make slight modifications to their behavior isn’t a very difficult concept, but often, it’s difficult to find good examples on how to get started, so today for Dojo week, we will look at a few short examples. If you have some examples of this you’d like to share, please comment them in or email them to me and I will post them and give you credit. Also, if you have a better way to do some of these examples, please submit those as well.

1. Override a ValidationTextBox and change the validation message

d.require(“dijit.form.ValidationTextBox”);

d.declare(“MyValidationTextBox”, dijit.form.ValidationTextBox, {
isValid: function(){
if (this.required && this._isEmpty(this.textbox.value)){
this.invalidMessage = “Required Field”;
} else {
this.invalidMessage = “Invalid Value Entered”;
}
return this.inherited(arguments);
}
});

Usage:

2. Override TextBox to create a read only version

d.declare(“ReadOnlyTextBox”, dijit.form.TextBox, {
readOnly:true,
baseClass:”borderlessTextBox”
});

As you can see the structure of this is really simple, just name your component, list what component it extends and then override the events, methods you want to change the behavior of. It is that simple.

a good idea would be to use your own namespace for these extensions just to prevent namespace collision. let’s look at an example.

d.declare(“com.domain.project.ReadOnlyTextBox”, dijit.form.TextBox, {
readOnly:true,
baseClass:”borderlessTextBox”
});

Usage:

This time, I used a package prefix that is the same as the prefix I use in my Java Source code. This will prevent any possible naming collision that might occur with an existing component that might be lurking somewhere. Dojo’s require method will also help you to prevent such problems. Only import the widgets you need.

d.require(“dijit.form.ValidationTextBox”); //Works just like a Java Import