如何向AlloyUI Scheduler的事件弹出窗口添加自定义按钮？ [英] How can I add a customized buttons to the AlloyUI Scheduler's event popup?

问题描述

如何将自定义按钮添加到AlloyUI Scheduler 的事件弹出窗口？事件弹出窗口包括保存，取消和删除按钮，但我想再添加一个（例如 Edit ）。我浏览了 Scheduler s API文档，但找不到有关向事件弹出窗口添加按钮的任何信息。

How can I add a customized buttons to the AlloyUI Scheduler's event popup? The event popup includes Save, Cancel, and Delete buttons, but I would like to add another one (for example Edit). I've looked through the Schedulers API Doc, but I cannot find any information on adding buttons to the event popup.

推荐答案

SchedulerEventRecorder 类包含对弹出框，其中包含您要向其添加按钮的表单。但是，我尝试自定义包含按钮的工具栏页脚（在计划程序的弹出窗口内的工具栏内），但这似乎是不可能的。因此，我怀疑是否存在用于自定义这些按钮的标准API方法，并且我也怀疑开发人员是否打算完全自定义这些按钮。因此，我建议您不要自定义按钮。

The SchedulerEventRecorder class contains a reference to the popover which contains the form to which you are seeking to add buttons. However, I've tried to customize the toolbar footer (within the toolbar within the popover within the scheduler) which contains the buttons, and it doesn't seem possible. So I'm doubtful that there is an standard API method for customizing these buttons, and I'm also doubtful that the developers intended for these buttons to be customized at all. Therefore I would recommend not customizing the buttons.

如果您确定尽管有潜在的问题，也希望添加并自定义这些按钮，但是我确实找到一种方法来做你想要的。每当 Scheduler 的弹出窗口弹出时，它仅显示默认按钮。即使在创建按钮后添加按钮，它也会忽略或删除它们，或者（很可能）被破坏然后重新创建，并且从不显示自定义按钮。因此，在弹出窗口显示自身之后必须添加任何按钮。为此，您可以在 SchedulerEventRecorder之后执行一个方法。 showPopover（） 方法，使用 Do.after（） 像这样：

If you are certain that you would like to add to and customize these buttons in spite of the potential issues however, then I did find a way to do what you wanted. Every time the Scheduler's popover pops up, it shows only the default buttons. Even if you add buttons to it after it has been created, it will ignore or remove them or (most likely) get destroyed and then recreated and never show custom buttons. So any buttons must be added after the popover displays itself. To do this, you can execute a method after the SchedulerEventRecorder.showPopover() method using Do.after() like so:

var eventRecorder = new Y.SchedulerEventRecorder();

Y.Do.after(function() {
    // Assuming that the boundingBox of your Scheduler has an id of "bb":
    var toolbarBtnGroup = Y.one('#bb .toolbar .btn-group');
    toolbarBtnGroup.appendChild('<button id="edit" type="button">Edit</button>');
}, eventRecorder, 'showPopover');

下面是一个可运行的代码示例：

Here's a runnable code example:

YUI().use('aui-button', 'aui-scheduler', 'event-custom-base', function (Y) {

    var eventRecorder = new Y.SchedulerEventRecorder();
    var weekView = new Y.SchedulerWeekView();

    new Y.Scheduler({
        boundingBox: '#bb',
        date: new Date(2014, 8, 28),
        eventRecorder: eventRecorder,
        items: [],
        views: [weekView]
    }).render();

    var editButton;

    Y.Do.after(function() {

        var toolbarBtnGroup = Y.one('#bb .toolbar .btn-group');
        toolbarBtnGroup.appendChild('<button id="edit" type="button">Edit</button>');

        editButton = new Y.Button({
            label: 'Edit',
            srcNode: '#edit',
        }).render();

        editButton.on('click', function(event) {
            alert('Edit clicked!');
            eventRecorder.hidePopover();
        });
    }, eventRecorder, 'showPopover');
    
    Y.Do.after(function() {
        
        // Make sure that the editButton is destroyed to avoid a memory leak.
        if (editButton) {
            editButton.destroy();
        }
    }, eventRecorder, 'hidePopover');
});

<link href="http://cdn.alloyui.com/2.5.0/aui-css/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script>
<!-- boundingBox of the scheduler -->
<div id="bb"></div>

这篇关于如何向AlloyUI Scheduler的事件弹出窗口添加自定义按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！