Oct 21, 2014, 12:34 PM
[CLOSED] Set Closable property for Portlet in Javascript is not working
Dear Team,
I have requirement that need to show up the Close tool icon on dropping the portal to the other Portal column
have set the closable=true in javascript to show up the close icon
but still the closable icon is not appearing..
i have written the code as below..
Please find the below code :
And also how can i play adding /removing portlets from one to other portlcolumn by using javascript ?
because while removing the portlet from other portletcolumn this is not removing the created items which i written under "RevertTheControl(curPortlet)"
Thanks in advance..
I have requirement that need to show up the Close tool icon on dropping the portal to the other Portal column
have set the closable=true in javascript to show up the close icon
but still the closable icon is not appearing..
i have written the code as below..
Please find the below code :
<ext:Portal ID="Portal1" runat="server" Border="False" Flex="1" BodyStyle="padding:5px;">
<Items>
<ext:PortalColumn ID="PortalColumn1" runat="server" Cls="droppable">
<Items>
<ext:Portlet ID="Portlet1" runat="server" Title="Company Name" Frame="false" Collapsible="false"
Closable="true" Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" >
</ext:Portlet>
<ext:Portlet ID="Portlet6" runat="server" Title="Name" Frame="false" Collapsible="false"
Closable="true" Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" />
<ext:Portlet ID="Portlet30" runat="server" Title="City" Frame="false" Collapsible="false"
Closable="true" Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" />
</Items>
</ext:PortalColumn>
<ext:PortalColumn ID="PortalColumn2" runat="server" Cls="droppable">
<Items>
<ext:Portlet ID="Portlet3" runat="server" Title="Sales Rep" Frame="false" Collapsible="false"
Closable="true" Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" />
<ext:Portlet ID="Portlet8" runat="server" Title="Last Contacted" Frame="false" Collapsible="false"
Closable="true" Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" />
<ext:Portlet ID="Portlet32" runat="server" Title="Priority" Frame="false" Collapsible="false"
Closable="true" Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" />
</Items>
</ext:PortalColumn>
<ext:PortalColumn ID="PortalColumn3" runat="server" Cls="droppable">
<Items>
<ext:Portlet ID="Portlet4" runat="server" Title="Category" Frame="false" Collapsible="false"
Closable="true" Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" />
<ext:Portlet ID="Portlet9" runat="server" Title="Contact Group" Frame="false" Collapsible="false"
Closable="true" Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" />
<ext:Portlet ID="Portlet10" runat="server" Title="Primary & Sub-Contacts?" Frame="false"
Collapsible="false" Closable="true" Collapsed="true" AnchorHorizontal="82%" Cls="my-header"
MarginSpec="0 0 5 0" />
</Items>
</ext:PortalColumn>
</Items>
<Listeners>
<BeforeDrop Fn="portalDrop">
</BeforeDrop>
</Listeners>
</ext:Portal>
<ext:PortalColumn ID="PortalColumn4" runat="server">
<Items>
<ext:Portlet ID="Portlet11" runat="server" Title="Company Name" Frame="false" Collapsible="false"
Closable="false" Disabled="true" Draggable="false" Collapsed="true" AnchorHorizontal="82%"
Cls="my-header" MarginSpec="0 0 5 0" />
<ext:Portlet ID="Portlet12" runat="server" Title="Name" Frame="false" Collapsible="false"
Closable="false" Disabled="true" Draggable="false" Collapsed="true" AnchorHorizontal="82%"
Cls="my-header" MarginSpec="0 0 5 0" />
<ext:Portlet ID="Portlet13" runat="server" Title="Ad Agency" Frame="false" Collapsible="false"
AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" >
<Listeners> <Close Fn="RevertTheControl"></Close>
</Listeners>
</ext:Portlet>
</Items>
</ext:PortalColumn>
Javascript Code : <script type="text/javascript">
var dragDropDetails =
{
SourcePortlet: null,
SourcePortalColumn: null,
TgtPortal: null,
TgtPortalColumn: null
}
function portalDrop(sourceAndDestination, b) {
//CreatePortLet
dragDropDetails.TgtPortal = sourceAndDestination.portal;
dragDropDetails.TgtPortalColumn = sourceAndDestination.column;
dragDropDetails.SourcePortlet = sourceAndDestination.data.panel;
dragDropDetails.SourcePortalColumn = sourceAndDestination.data.panel.ownerCt;
dragDropDetails.SourcePortlet.closable = true;
//dragDropDetails.SourcePortlet.render(dragDropDetails.TgtPortal.id,true);
// var closeTool = Ext.create("Ext.panel.Tool", { id:"tp1",xtype: "tool", type: "close", ui: "default", tooltipType: "qtip", height: 15 });
//
// dragDropDetails.SourcePortlet.tools.push(closeTool);
// dragDropDetails.SourcePortlet.tools[0].show();
CreatePortLet();
}
function CreatePortLet() {
var portletCtrl = Ext.create('Ext.app.Portlet', {
id: dragDropDetails.SourcePortlet.id + '_Disabled',
anchor: "82%",
draggable: false,
margin: "0 0 5 0",
title: dragDropDetails.SourcePortlet.title,
disabled: true,
closable: false,
collapsible: false,
cls: "my-header"
// listeners: {
// 'change': Ext.bind(this.onDateChange, this)
// }
}
);
dragDropDetails.SourcePortalColumn.items.add(portletCtrl);
}
function RevertTheControl(curPortlet) {
// step 1: identify the PortalColumn(Parent) of the portlet
var parentPortalColumn = curPortlet.ownerCt;
// remove from the parent
parentPortalColumn.items.items.pop(curPortlet)
// find the Default place holder of the control suffix by '_Disabled'
var portletDisabled = Ext.getCmp(curPortlet.id + '_Disabled');
portletDisabled.ownerLayout.owner.items.items.pop(portletDisabled);
portletDisabled.ownerLayout.owner.items.items.push(curPortlet);
portletDisabled.ownerLayout.owner.doLayout();
return false;
}
</script>
And also how can i play adding /removing portlets from one to other portlcolumn by using javascript ?
because while removing the portlet from other portletcolumn this is not removing the created items which i written under "RevertTheControl(curPortlet)"
Thanks in advance..
Last edited by Daniil; Oct 28, 2014 at 4:29 PM.
Reason: [CLOSED]