[CLOSED] Set Closable property for Portlet in Javascript is not working

  1. #1

    [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 :
    
     <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]
  2. #2
    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.

Similar Threads

  1. [CLOSED] how to set panel html property as javascript property
    By kenanhancer in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Jan 05, 2011, 6:45 PM
  2. [CLOSED] [1.0] ImageUrl property in Ext.Net.Portlet
    By betamax in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 03, 2010, 9:51 PM
  3. [CLOSED] Portlet closable and closeaction property obsolete?
    By jchau in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 01, 2010, 4:27 PM
  4. Code behind setting Title property on portlet fails
    By netwearcdz in forum 1.x Help
    Replies: 3
    Last Post: Jan 15, 2010, 3:36 PM
  5. Add Portlet through Javascript
    By sunilaecs in forum 1.x Help
    Replies: 0
    Last Post: Apr 25, 2009, 3:17 AM

Posting Permissions