Question

如果我通过道场制作了标签，

mycode的

var tab=new dijit.layout.ContentPane({
        title:formCount,
        id:''+formCount,
        content:cont,
        class:'tab',
        closable: true,
        onClose:function(){
            return confirm('Relly want to remove?');
        }
    });
 dijit.byId('tabContainer').addChild(tab);

创建选项卡后，我想通过dijit / Dialog动态更改选项卡标题。但我不知道应该如何实施，请告诉我

Answer 1

实现此目标的最佳方法是创建自己的小部件并从dijit/layout/ContentPane扩展，例如：

declare([ ContentPane ], {

});

然后你可以添加东西来显示对话框，例如：

declare([ ContentPane ], {
    btn: domConstruct.create("button", {
        innerHTML: "Change title",
    }),
    _createButton: function() {
        domConstruct.place(this.btn, this.domNode);
        on(this.btn, "click", lang.hitch(this, this._showDialog));
    },
    postCreate: function() {
        this.inherited(arguments);
        this._createButton();
        this._createDialog();
    }
});

postCreate函数是Dojo中窗口小部件生命周期的一部分，并在加载窗口小部件时自动执行。因此，我们使用它来添加＆＃34;更改标题＆＃34;按钮到内容窗格，在点击时调用函数this._showDialog()（这是this._createButton()中可以看到的内容）。

当然，你还需要创建一个dijit/Dialog才能实现show one，所以你可以这样做：

declare([ ContentPane ], {
    /** ... */
    dialog: null,
    editField: null,
    okBtn: null,
    _showDialog: function() {
        this.editField.value = this.title;
        this.dialog.show();
    },
    _createDialog: function() {
        var div = domConstruct.create("div");
        domConstruct.place(div, this.domNode);
        this.dialog = new Dialog({
            title: "Change title",
            content: ""
        }, div);

        this.editField = domConstruct.create("input", {
            type: "text"
        });
        this.okBtn = domConstruct.create("button", {
            innerHTML: "OK" 
        });
        domConstruct.place(this.editField, this.dialog.containerNode);
        domConstruct.place(this.okBtn, this.dialog.containerNode);
        on(this.okBtn, "click", lang.hitch(this, this._saveTitle));
    },
    /** .. */
});

这里发生的是我们创建一个带有简单文本字段和按钮（OK按钮）的对话框，所有这些都可以在this._createDialog()中找到。

在this._showDialog()中，您可以看到我首先将文本字段的值更改为contentpane的标题。然后我展示了我们之前制作的对话框。

现在，您只需在按下确定按钮时读取该值：

declare([ ContentPane ], {
    /** ... */
    _saveTitle: function() {
        this.set("title", this.editField.value);
        this.dialog.hide();
    },
    /** ... */
});

这就是你真正需要的。您可以在JSFiddle上找到一个工作示例：http://jsfiddle.net/LE49K/

dojo如何在tabContainer中动态更改选项卡的标题？

1 个答案: