How to extend dijit.form.button

Question

I am trying to extend dijit.form.Button with an extra attribute but this is not working.Code is given below

In file1.js

dojo.require('dijit.form.Button');
dojo.extend(dijit.form.Button,{xyz: ''});

In file2.jsp

<script type="text/javascript" src="file1.js"></script>
<div dojoType="dijit.form.Button" xyz="abc"></div>

However when I look at the HTML of the created button (In chrome seen by right click and then selecting 'inspect element' option), it doesn't show xyz attribute.

Answer 1

You need to keep in mind that there's a distinction between the widget object and its HTML representation. When you extend dijit.form.Button, the xyz attribute is added to the widget class, but not automatically to the HTML that the widget will render. So in your case, if you do

console.debug(dijit.byId("yourWidgetId").get("xyz"));

.. you'll see that the button object does have the xyz member, but the HTML (like you point out) does not.

If you also want it do be visible in the HTML, you have to manually add it to the HTML rendering of the button. One way to do that is to subclass dijit.form.Button and override the buildRendering method.

dojo.declare("my.Button", dijit.form.Button, {
    xyz: '',
    buildRendering: function() {
        this.inherited(arguments);
        this.domNode.setAttribute("xyz", this.xyz); 
    }
});

If you add an instance of your new Button class in the HTML, like so:

<div dojoType="my.Button" xyz="foobar" id="mybtn"></div>

.. then the HTML representation (after Dojo has parsed it and made it into a nice looking widget) will contain the xyz attribute. Probably something like this:

<span class="..." xyz="foobar" dir="ltr" widgetid="mybtn">
    <span class="..." dojoattachevent="ondijitclick:_onButtonClick">
    <input class="dijitOffScreen" type="button" dojoattachpoint="valueNode" ...>
</span>