PDA

View Full Version : [CLOSED] Set Closable property for Portlet in Javascript is not working



iansriley
Oct 21, 2014, 1:34 PM
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 :



<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(dragDropDetai ls.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(portl etCtrl);
}

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..

Daniil
Oct 21, 2014, 4:37 PM
Hi @iansriley,

The closable setting is a config option. It means that changing it after the moment when the component is already rendered doesn't help.

I would try the addTool method, but I am not sure it is going to work well.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-method-addTool

Personally, I would try to create a portlet always with "closable: true" and its element with the Render event handler. Then it should be quite easy to show and hide it on demand.