What's New?

[CLOSED] Add close (hide) tool button and event to Portlet

  1. #1
    Sep 30, 2010, 3:20 PM

    [CLOSED] Add close (hide) tool button and event to Portlet

    How do I add a close button and associated event to the following javascript?
    function duplicatePortlet(e) {
    // don't allow duplicates to create in originating portal
    if ((e.panel.ownerCt.ownerCt.id == 'ContentPH_ptl1') || (e.panel.ownerCt.ownerCt.id == 'ContentPH_ptl2')) {
    //if (e.panel.ownerCt.ownerCt.id.substring(0,9) == 'ContentPH') {
        return true;
    }
    if (e.portal == e.panel.ownerCt.ownerCt) {
        return true;
    }
 
    //create a new id for the duplicate   
    var q = parseInt(document.getElementById('ContentPH_hidHighPortletVar').value);
    q++;
    document.getElementById('ContentPH_hidHighPortletVar').value = q;
    var newId = e.panel.id + 'QZ' + q.toString();  
    //create duplicate portlet
    var id = newId,
        imageTag = "<image src='" + e.panel.imageUrl + "'/>",
        panel = Ext.ComponentMgr.create({ id: id, xtype: "portlet", title: id, html: imageTag }),
        pos = e.position,
        c = e.column,
        portal = e.portal;
    //drop portlet into new position
    if (pos !== false) {
        c.insert(pos, panel);
    } else {
        c.add(panel);
    }
    c.doLayout();
    portal.fireEvent('drop', e);
 
    var st = portal.dd.scrollPos.top;
    if (st) {
        var d = portal.body.dom;
        setTimeout(function() {
            d.scrollTop = st;
        }, 10);
    }   
 
    playsound('sounds/Blood_Hitting_Window.wav')
 
    return false;
 
}
    Last edited by Daniil; Oct 01, 2010 at 3:34 PM. Reason: [CLOSED]
  2. #2
    Oct 01, 2010, 7:48 AM
    Hi betamax,

    Here are three ways to achieve this.
    Please look at the example.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        Portlet1.Tools.Add(new Tool(ToolType.Close, "closeHandler(event, toolEl, panel);", "Close Portlet"));
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>

    <script type="text/javascript">
        var closeHandler = function(event, toolEl, panel) {
            alert('Hello from close handler!');
        }
    </script>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Panel 
        runat="server" 
        Height="250" 
        Width="300" 
        Layout="fit">
        <Items>
            <ext:Portal runat="server" Layout="column">
                <Items>
                    <ext:PortalColumn runat="server" ColumnWidth=".33">
                        <Items>
                            <ext:Portlet 
                                ID="Portlet1" 
                                runat="server" 
                                Title="Portlet 1" 
                                Html="Some content" />
                        </Items>
                    </ext:PortalColumn>
                    <ext:PortalColumn runat="server" ColumnWidth=".33">
                        <Items>
                            <ext:Portlet runat="server" Title="Portlet 2" Html="Some content">
                                <CustomConfig>
                                    <ext:ConfigItem 
                                        Name="tools" 
                                        Value="[{id:'close',handler:closeHandler,qtip:'Close Portlet'}]"
                                        Mode="Raw" />
                                </CustomConfig>
                            </ext:Portlet>
                        </Items>
                    </ext:PortalColumn>
                    <ext:PortalColumn runat="server" ColumnWidth=".33">
                        <Items>
                            <ext:Portlet runat="server" Title="Portlet 3" Html="Some content">
                                <Listeners>
                                    <BeforeRender Handler=" this.tools = [];
                                                            this.tools.push({
                                                                id:'close',
                                                                handler:closeHandler,
                                                                qtip:'Close Portlet'})"/>
                                </Listeners>
                            </ext:Portlet>
                        </Items>
                    </ext:PortalColumn>
                </Items>
            </ext:Portal>
        </Items>
    </ext:Panel>
    </form>
</body>
</html>
  3. #3
    Oct 01, 2010, 1:16 PM

    [CLOSED] thanks

    For anyone curious, here's how this applied to my code.
     
function duplicatePortlet(e) {
    // don't allow duplicates to create in originating portal
    if ((e.panel.ownerCt.ownerCt.id == 'ContentPH_ptl1') || (e.panel.ownerCt.ownerCt.id == 'ContentPH_ptl2')) {
    //if (e.panel.ownerCt.ownerCt.id.substring(0,9) == 'ContentPH') {
        return true;
    }
    if (e.portal == e.panel.ownerCt.ownerCt) {
        return true;
    }
 
    //create a new id for the duplicate   
    var q = parseInt(document.getElementById('ContentPH_hidHighPortletVar').value);
    q++;
    document.getElementById('ContentPH_hidHighPortletVar').value = q;
    var newId = e.panel.id + 'QZ' + q.toString();  
    //create duplicate portlet
    var id = newId,
        imageTag = "<image src='" + e.panel.imageUrl + "'/>",
        panel = Ext.ComponentMgr.create({ id: id, xtype: "portlet", title: id, html: imageTag }),
        pos = e.position,
        c = e.column,
        portal = e.portal;
 
    panel.tools = []; panel.tools.push({ id: 'close', handler: closeHandler, qtip: 'Close Portlet' })
 
    //drop portlet into new position
    if (pos !== false) {
        c.insert(pos, panel);
    } else {
        c.add(panel);
    }
    c.doLayout();
    portal.fireEvent('drop', e);
 
    var st = portal.dd.scrollPos.top;
    if (st) {
        var d = portal.body.dom;
        setTimeout(function() {
            d.scrollTop = st;
        }, 10);
    }   
 
    playsound('sounds/Blood_Hitting_Window.wav')
 
    return false;
 
}
 
var closeHandler = function (event, toolEl, panel) { panel.destroy(); }
    The code marked with <B> is what added the button and handles the event.

Similar Threads

  1. How to display / hide 'close' button on Tab
    By Aod47 in forum 1.x Help
    Replies: 12
    Last Post: Dec 17, 2011, 11:07 AM
  2. EXt 1.0Rc Autoload URL & close button in Dynaic portlet created from code behind
    By shijith in forum 1.x Help
    Replies: 2
    Last Post: Dec 25, 2010, 11:07 AM
  3. [1.0] Portlet - Hide close button
    By serdias in forum 1.x Help
    Replies: 2
    Last Post: Nov 16, 2010, 10:10 PM
  4. [CLOSED] [1.0] Add AjaxEvent to Portlet tool button
    By betamax in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Sep 30, 2010, 9:43 PM
  5. [CLOSED] Notification: hide close button when AutoHide = false
    By jchau in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 16, 2009, 3:10 PM

Posting Permissions