закрыть толстую кнопку исчезнуть всплывающее окно liferay 6.2

Я переношу всплывающее диалоговое окно AUI с liferay 6.1 на liferay 6.2. Я вижу, что есть определенные изменения, которые необходимо внести. У меня были некоторые проблемы с отображением кнопок, но теперь они решены. Но проблема заключается в значке закрытия (x), который должен быть в правом верхнем углу. Он внезапно исчез, как только я добавил кнопку сохранения.

Вот мой код:

myPopup = AUI().use('aui-base','liferay-util-window','aui-io-deprecated', 'event', 'event-custom', function(A) {
    var buttons =[{
        cssClass: 'button_close',
        label: 'Save',
        render:true,
        id: 'myPopupButton',
        on: {
        click: function() {
            myPopupSubmit();
        }}
    }];

myPopup = Liferay.Util.Window.getWindow(
{
    dialog: {
        title : a + ' mytitle',
        centered : true,
        height : 600,
        width : 500,
        draggable : true,
        resizable : true,
        modal : true,
        toolbars: {
            footer:buttons
        },

    }}).plug(A.Plugin.IO, {
        uri : url
    }).render();
    myPopup.show(); 
});
}

Пожалуйста, дайте мне знать, если у вас есть какие-либо идеи по этому поводу ..

на myPopupSubmit я также написал код для закрытия всплывающего окна:

top.document.getElementById('closethick').click();

Поскольку кнопки closethick нет, возвращается null.


popup liferay alloy-ui liferay-aui
person user596502    schedule 24.06.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Используя пример модального диалогового окна в качестве сравнения, кнопка закрытия X удаляется при использовании toolbars имущество.

Проверка исходного кода для свойства toolbars (строка 309 на момент написания этой статьи) указывает, что если вы используете это свойство напрямую, вам нужно будет включить в заголовок собственное закрытие X.

Альтернативой может быть использование функции addToolbar (как показано в примере), чтобы включить ваш buttons, сохраняя при этом панели инструментов по умолчанию.

modal.addToolbar([{
 cssClass: 'button_close',
 label: 'Save',
 render:true,
 id: 'myPopupButton',
 on: {
       click: function() {
         myPopupSubmit();
       }
     }
}]);

Я бы также подумал о том, чтобы сделать экземпляр диалога доступным для вашей функции myPopupSubmit, чтобы у вас был прямой доступ для выполнения dialog.hide() или вызова dialog.hide() после myPopupSubmit вместо использования подхода X close.

Если придерживаться текущего подхода, используемый идентификатор не будет работать, вам нужно будет использовать селектор CSS, поскольку идентификатор на основе YUI изменится.

person Origineil    schedule 24.06.2014
comment
Спасибо ! Да, теперь появляется кнопка X, но кнопка «Сохранить» не отображается. - person user596502; 25.06.2014
comment
Моя ошибка: я должен был сделать myPopup.addToolbar([{...}]).. Теперь это работает. Спасибо! - person user596502; 25.06.2014
comment
На самом деле просто хотел спросить, правильно ли закрывать окно: значок X в правом верхнем углу работает, но я также хочу включить закрытие окна после нажатия кнопки «Сохранить». Как предположил @Origineil, идентификатор изменится, поэтому мне нужно использовать селектор css. Можете ли вы привести один пример для этого. Я пробовал наоборот, например: вызов myPopup.hide(); после myPopupSubmit(), но я получаю сообщение об ошибке типа, говорящее, что myPopup.hide не является функцией... может быть, я делаю это неправильно.. - person user596502; 25.06.2014
comment
Если нет необходимости в Liferay.Util.Window.getWindow, я бы отобразил модальный диалог, используя подход aui-modal, как показано в связанном примере. Пример использования вашего подхода можно увидеть в источник портлета календаря. Если вы хотите продолжить модель вашего подхода после этого, в строке 73 они используют .hide(). Что касается селекторов CSS, этот пример довольно хорош. - person Origineil; 25.06.2014