[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 :

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 :

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

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