如何将自定义按钮添加到 AlloyUI 调度程序的事件弹出窗口？答案

【问题标题】：How can I add a customized buttons to the AlloyUI Scheduler's event popup?如何将自定义按钮添加到 AlloyUI 调度程序的事件弹出窗口？
【发布时间】：2016-04-29 15:02:02
【问题描述】：

如何在 AlloyUI Scheduler 的事件弹出窗口中添加自定义按钮？事件弹出窗口包括Save、Cancel 和Delete 按钮，但我想添加另一个按钮（例如Edit）。我查看了Schedulers API Doc，但找不到任何有关向事件弹出窗口添加按钮的信息。

【问题讨论】：

标签： alloy-ui

【解决方案1】：

SchedulerEventRecorder 类包含对 popover 的引用，其中包含您要添加按钮的表单。但是，我尝试自定义包含按钮的工具栏页脚（在调度程序弹出框内的工具栏内），这似乎是不可能的。所以我怀疑是否有自定义这些按钮的标准 API 方法，我也怀疑开发人员是否打算自定义这些按钮。因此，我建议不要自定义按钮。

如果您确定要添加和自定义这些按钮，尽管存在潜在问题，那么我确实找到了一种方法来做您想做的事。每次Scheduler 的弹出框弹出时，它只显示默认按钮。即使您在创建后向其添加按钮，它也会忽略或删除它们，或者（很可能）被破坏然后重新创建并且永远不会显示自定义按钮。因此，必须在弹出框显示后添加任何按钮。为此，您可以使用Do.after() 在SchedulerEventRecorder.showPopover() 方法之后执行一个方法，如下所示：

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');

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

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>

【讨论】：

【解决方案2】：

我已经创建了自己的请求记录器：

    var myEventRecorder = A.Component.create({
        EXTENDS: A.SchedulerEventRecorder,

        NAME: 'scheduler-event-recorder',

        prototype: {
            _getFooterToolbar: function() {
                var instance = this,
                event = instance.get('event'),
                strings = instance.get('strings'),
                children = [
                    {
                        label: strings['cancel'],
                        on: {
                            click: A.bind(instance._handleCancelEvent, instance)
                        }
                    }
                ];

                var requestId = event && event.get('requestId');

                if (requestId) {
                    children.push({
                        label: strings['open_request'],
                        on: {
                            click: A.bind(instance._handleOpenRequest, instance)
                        }
                    });
                }

                return [children];
            },

            _handleOpenRequest : function() {
                //console.log(arguments);
                var event = this.get('event');
                var requestUrl = this.get('requestUrl');
                requestUrl.setParameter('REQUEST_PARAM', event.get('requestId'));
                window.location.href = requestUrl.toString();
            }
        }
    });

    var eventRecorder = new myEventRecorder();

然后使用它：

var scheduler = new A.Scheduler(
      {
        boundingBox: '#myScheduler',
        eventRecorder: eventRecorder,
        views: [dayView, weekView]
      }
);

【讨论】：