如何扩展dijit.form.button

Question

我试图用额外的属性扩展dijit.form.Button但这不起作用.下面给出了代码

在file1.js中

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

在file2.jsp中

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

但是,当我查看创建按钮的HTML时(通过右键单击然后选择'inspect element'选项看到chrome),它不会显示xyz属性.

Answer 1

您需要记住,widget对象及其HTML表示之间存在区别.扩展时dijit.form.Button,xyz属性将添加到窗口小部件类,但不会自动添加到窗口小部件将呈现的HTML中.所以在你的情况下,如果你这样做

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

..你会看到按钮对象确实有xyz成员,但HTML(就像你指出的那样)没有.

如果您还希望它在HTML中可见,则必须手动将其添加到按钮的HTML呈现中.一种方法是子类化dijit.form.Button并覆盖该buildRendering方法.

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

如果在HTML中添加新Button类的实例,如下所示:

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

..然后HTML表示(在Dojo解析它并使其变成漂亮的小部件之后)将包含xyz属性.可能是这样的:

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