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

Question

如何向 AlloyUI 添加自定义按钮 Scheduler 的事件弹出？事件弹出窗口包括 Save , Cancel , 和 Delete按钮，但我想添加另一个(例如 Edit )。我已经浏览了 Scheduler s API Doc ，但我找不到有关向事件弹出窗口添加按钮的任何信息。

Answer 1

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

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

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>