closethick button disappear liferay popup 6.2

Question

I am migrating the AUI popup dialog window from liferay 6.1 to liferay 6.2. I see that there are some specific changes to be made. I had some problems with display of buttons but it is resolved now. But the problem is with the close icon (x) which should be on the top right corner. It disappeared suddenly as soon as I added a save button.

Here is my code:

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(); 
});
}

Please let me know if you have any idea on it..

on myPopupSubmit I have also written code to close the popup as:

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

Since there is no closethick button it returns null.

Answer 1

Using the modal dialog example as a comparison, the X close button is removed when using the toolbars property.

Reviewing the source code for the toolbars property (line 309 at time of writing this) indicates that if you use this property directly, you'll need to include your own X close in the header.

An alternative would be to use the addToolbar function (as seen in the example) to include your buttons while preserving the default toolbars.

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

---

I would also consider making the instance of the dialog available to your myPopupSubmit function so that you would have direct access to perform dialog.hide() or calling dialog.hide() after myPopupSubmit versus using the X close approach.

If sticking with the current approach, the id being used will not work, you'll need to use a CSS selector as the YUI based id will change.