PDA

View Full Version : [CLOSED] Ext.net Portlet Hide/Show Problem



iansriley
Nov 04, 2014, 4:56 PM
Hi,

We are using Portlet and portal columns to drag drop for one of my "Control Alignment Configuration" Screen

Requirement is that

we have two panels pnlGeneral and FieldSetContactInfo

1.Once we close the portlet under pnlGeneral then will hiding the hiding the closable control and also [id]Disabled and showing the [id]active which are located under "FieldsetContactInfo" .
2.Once we drop the control from "contact info Panel" to pnlGeneral will be showing up [id]Top ,[id]Disabled and hiding the [id]Active
3. we only have to drop the FieldSetContactInfo portlets in to pnlGeneral ( but, no other portlets from pnlGeneral).

and bit pain to write all the requirement and my issue has been attached step step
This way we are been managing the control alignment configuration.


Now everything working fine except please follow the below steps to understand the Issue.

Step1: Close the "Company Name" from "PnlGeneral". ( Then will observe the Contact info "Company Name" gets enabled as soon as Company name closed)

Step2: Once we drag the same "Company Name" portlet from fieldsetContactinfo in to "pnlGeneral" ( appearing two portlets one is [id]diabled and other is [id]active ,even after hiding the [id]active portlet , therefore dupicate portlets are appearing which is wrong)

control
find the javascript code:


<script language="javascript" type="text/javascript">


var dragDropDetails =


{
SourcePortlet: null,
SourcePortalColumn: null,
TgtPortal: null,
TgtPortalColumn: null,
Position :0
}


function getControlName(id) {

return id.substr(1, id.length - 1).replace("Top", "").replace("Disabled", "").replace("Active", "");


}

function hideTop() {
//get the actual control we clicked on and show/hide/move the corresponding items in the field sets


//hide the disabled control, since we are "moving" it back to the field set
//App.p[ControlName]Disabled.hide();


//show the active controls since we are "removing" it from the top criteria section
//App.p[ControlName]Active.hide();


//the control on top will be automatically hidden since we have clicked the close button


//example - just to get an idea of how it works
var curCtrl = getControlName(this.id);


Ext.getCmp('p'+curCtrl + 'Top').hide();
Ext.getCmp('p'+curCtrl + 'Disabled').hide();
Ext.getCmp('p'+curCtrl + 'Active').show();


}

function dropTop(sourceAndDestination, b) {


dragDropDetails.TgtPortal = sourceAndDestination.portal;
dragDropDetails.TgtPortalColumn = sourceAndDestination.column;
dragDropDetails.SourcePortlet = sourceAndDestination.data.panel;
dragDropDetails.SourcePortalColumn = sourceAndDestination.data.panel.ownerCt;
dragDropDetails.Position = sourceAndDestination.position;
var movingCtrl = getControlName(dragDropDetails.SourcePortlet.id);




// alert('\n Taget Column :' + dragDropDetails.TgtPortalColumn.id + ' \n Position: ' + sourceAndDestination.position + ' \n Moving control Id: ' + dragDropDetails.SourcePortlet.id);



if (dragDropDetails.SourcePortlet.ownerCt.ownerCt.id != dragDropDetails.TgtPortal.id) { // if Parent Portal and moving control parent portal are not same then write the Hide/Show logic
Ext.getCmp('p' + movingCtrl + 'Active').hide();
Ext.getCmp('p' + movingCtrl + 'Top').show();
Ext.getCmp('p' + movingCtrl + 'Disabled').show();
// dragDropDetails.SourcePortlet.hide();

return false;


}

}





Html :



<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="Viewport2" runat="server" Layout="HBoxLayout" StyleSpec="padding:10px 10px 10px 10px;">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" Pack="Start" />
</LayoutConfig>
<Items>
<ext:Panel runat="server" ID="panelMain" Header="false" Flex="1">

<Items>
<ext:Panel ID="panelSearch" DefaultAnchor="" runat="server" Border="false" Title="Search"
Header="false" ButtonAlign="Center" Layout="AnchorLayout" PaddingSpec="2 0 0 5"
Hidden="false">
<Items>
<ext:Portal ID="pnlGeneral" runat="server" Border="False" Flex="1" BodyStyle="padding:5px;">
<Items>
<ext:PortalColumn ID="pnlGeneral1" runat="server" MaintainFlex="true">
<Items>
<ext:Portlet ID="pCompanyNameTop" Hidden="false" Disabled="false" runat="server" Title="Company Name" Frame="false"
Collapsible="false" Closable="true" Collapsed="true" AnchorHorizontal="82%" Cls="my-header"
MarginSpec="0 0 5 0" CloseAction="Hide">
<Listeners>
<Close Fn="hideTop">
</Close>
</Listeners>
</ext:Portlet>
<ext:Portlet ID="pNameTop" Hidden="false" Disabled="false" runat="server" Title="Name" Frame="false" Collapsible="false" CloseAction="Hide"
Closable="true" Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0">
<Listeners>
<Close Fn="hideTop">
</Close>
</Listeners>
</ext:Portlet>


<ext:Portlet ID="pCityTop" Hidden="false" Disabled="false" runat="server" Title="City" Frame="false"
Collapsible="false" Closable="true" Draggable="false" Collapsed="true" CloseAction="Hide"
AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0">
<Listeners>
<Close Fn="hideTop">
</Close>
</Listeners>
</ext:Portlet>





<ext:Portlet ID="pAdAgencyTop" Hidden="true" Disabled="false"
CloseAction="Hide"
runat="server" Title="Ad Agency" Frame="false" Collapsible="false"
Closable="true" Collapsed="true" AnchorHorizontal="82%" Cls="my-header"
MarginSpec="0 0 5 0">
<Listeners>
<Close Fn="hideTop">
</Close>
</Listeners>
</ext:Portlet>
</Items>
</ext:PortalColumn>
<ext:PortalColumn ID="pnlGeneral2" runat="server">
<Items>
<ext:Portlet ID="pRepsTop" Hidden="false" runat="server" Title="Sales Rep" Frame="false" Collapsible="false" CloseAction="Hide"
Closable="true" Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0">
<Listeners>
<Close Fn="hideTop">
</Close>
</Listeners>
</ext:Portlet>
<ext:Portlet ID="pLastContactTop" runat="server" Title="Last Contacted" Frame="false"
Collapsible="false" Closable="true" Collapsed="true" AnchorHorizontal="82%" Cls="my-header" CloseAction="Hide"
MarginSpec="0 0 5 0">
<Listeners>
<Close Fn="hideTop">
</Close>
</Listeners>
</ext:Portlet>
<ext:Portlet ID="pPriorityTop" runat="server" Title="Priority" Frame="false" Collapsible="false" CloseAction="Hide"
Closable="true" Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0">
<Listeners>
<Close Fn="hideTop">
</Close>
</Listeners>
</ext:Portlet>
</Items>
</ext:PortalColumn>
<ext:PortalColumn ID="pnlGeneral3" runat="server">
<Items>
<ext:Portlet ID="pCategoryTop" runat="server" Title="Category" Frame="false" Collapsible="false" CloseAction="Hide"
Closable="true" Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0">
<Listeners>
<Close Fn="hideTop">
</Close>
</Listeners>
</ext:Portlet>
<ext:Portlet ID="pContactGroupTop" runat="server" Title="Contact Group" Frame="false" CloseAction="Hide"
Collapsible="false" Closable="true" Collapsed="true" AnchorHorizontal="82%" Cls="my-header"
MarginSpec="0 0 5 0">
<Listeners>
<Close Fn="hideTop">
</Close>
</Listeners>
</ext:Portlet>
<ext:Portlet ID="pSubContactsTop" runat="server" Title="Primary & Sub-Contacts?" CloseAction="Hide"
Frame="false" Collapsible="false" Closable="true" Collapsed="true" AnchorHorizontal="82%"
Cls="my-header" MarginSpec="0 0 5 0">
<Listeners>
<Close Fn="hideTop">
</Close>
</Listeners>
</ext:Portlet>
<ext:Portlet ID="pContactTypeTop" Hidden="true" Disabled="false" Closable="true" CloseAction="Hide"
runat="server" Title="Contact Type" Frame="false" Collapsible="false" Collapsed="true"
AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0">
<Listeners>
<Close Fn="hideTop">
</Close>
</Listeners>
</ext:Portlet>
</Items>
</ext:PortalColumn>
</Items>
<Listeners>
<%-- <BeforeDrop Handler="if( dropTop11(this)==false){App.pCompanyNameActive.hid e(); return false;}" >
</BeforeDrop>--%>
<BeforeDrop Fn="dropTop" >
</BeforeDrop>
<%-- <Drop Handler="dropTop();">
</Drop>--%>
</Listeners>
</ext:Portal>
<ext:FieldSet ID="FieldSetContactInfo" runat="server" Hidden="false" Collapsed="false" StyleSpec="padding-top:10px;"
Collapsible="true" AutoScroll="true" Title="Contact Info" Border="false" Layout="HBoxLayout">
<Defaults>
<ext:Parameter Name="Border" Value="false" />
<ext:Parameter Name="Flex" Value="1" />
<ext:Parameter Name="Layout" Value="anchor" />
</Defaults>
<Items>
<ext:PortalColumn ID="pnlFieldSetContact1" runat="server">
<Items>
<ext:Portlet ID="pCompanyNameDisabled" Hidden="false" Disabled="true" runat="server" Title="Company Name" Frame="false"
Collapsible="false" Closable="false" Draggable="false"
Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" />


<ext:Portlet ID="pCompanyNameActive" Hidden="true" Disabled="false" runat="server" Title="Company Name" Frame="false"
Collapsible="false" Closable="false" Draggable="true"
Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0">

</ext:Portlet>
<ext:Portlet ID="pNameDisabled" Hidden="false" 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="pNameActive" Hidden="true" runat="server" Title="Name" Frame="false"
Collapsible="false" Closable="false" Disabled="false" Draggable="true" Collapsed="true"
AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0">
</ext:Portlet>
<ext:Portlet ID="pCityDisabled" Hidden="false" runat="server" Title="City" 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="pCityActive" Hidden="true" runat="server" Title="City" Frame="false"
Collapsible="false" Closable="false" Disabled="false" Draggable="true" Collapsed="true"
AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0">
</ext:Portlet>
<ext:Portlet ID="pAdAgencyDisabled" Hidden="true" runat="server" Title="Ad Agency"
Frame="false" Collapsible="false" Closable="false" Disabled="true" Draggable="true"
Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0">
</ext:Portlet>
<ext:Portlet ID="pAdAgencyActive" Hidden="false" runat="server" Title="Ad Agency"
Frame="false" Collapsible="false" Closable="false" Disabled="false" Draggable="true"
Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0">
</ext:Portlet>
</Items>
</ext:PortalColumn>
<ext:PortalColumn ID="pnlFieldSetContact2" runat="server">
<Items>
<ext:Portlet ID="pPriorityDisabled" Hidden="false" Disabled="true" Closable="false"
runat="server" Title="Priority" Frame="false" Collapsible="false" Draggable="false"
Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" />
<ext:Portlet ID="pPriorityActive" Hidden="true" Disabled="false" Closable="false" Draggable="true"
runat="server" Title="Priority" Frame="false" Collapsible="false" Collapsed="true"
AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" />


<ext:Portlet ID="pRepsDisabled" Hidden="false" Disabled="true" Closable="false" runat="server"
Title="Sales Rep" Frame="false" Collapsible="false" Draggable="false" Collapsed="true"
AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" />


<ext:Portlet ID="pRepsActive" Hidden="true" Disabled="false" Closable="false" runat="server"
Title="Sales Rep" Frame="false" Collapsible="false" Draggable="true" Collapsed="true"
AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" />
<ext:Portlet ID="pLastContactDisabled" Hidden="false" Disabled="true" Closable="false"
runat="server" Title="Last Contacted" Frame="false" Collapsible="false" Draggable="false"
Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" />
<ext:Portlet ID="pLastContactActive" Hidden="true" Disabled="false" Closable="false"
runat="server" Title="Last Contacted" Frame="false" Collapsible="false" Draggable="true"
Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" />
</Items>
</ext:PortalColumn>
<ext:PortalColumn ID="pnlFieldSetContact3" runat="server">
<Items>
<ext:Portlet ID="pCategoryDisabled" Hidden="false" Disabled="true" runat="server"
Title="Category" Frame="false" Collapsible="false" Closable="false" Draggable="false"
Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" />
<ext:Portlet ID="pCategoryActive" Hidden="true" Disabled="false" runat="server" Title="Category"
Frame="false" Collapsible="false" Closable="false" Draggable="true" Collapsed="true"
AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" />
<ext:Portlet ID="pContactGroupDisabled" Hidden="false" Disabled="true" runat="server"
Title="Contact Group" Frame="false" Collapsible="false" Closable="false" Collapsed="true"
AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0">
</ext:Portlet>
<ext:Portlet ID="pContactGroupActive" Hidden="true" Disabled="false" runat="server"
Title="Contact Group" Frame="false" Collapsible="false" Closable="false" Draggable="true"
Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" />
<ext:Portlet ID="pSubContactsDisabled" Hidden="false" Disabled="true" runat="server"
Title="Primary & Sub-Contacts?" Frame="false" Collapsible="false" Closable="false"
Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0">
</ext:Portlet>
<ext:Portlet ID="pSubContactsActive" Hidden="true" Disabled="false" runat="server"
Title="Primary & Sub-Contacts?" Frame="false" Collapsible="false" Closable="false"
Draggable="true" Collapsed="true" AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0" />
<ext:Portlet ID="pContactTypeDisabled" Hidden="true" Disabled="true" Closable="true"
runat="server" Title="Contact Type" Frame="false" Collapsible="false" Collapsed="true"
AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0">
</ext:Portlet>
<ext:Portlet ID="pContactTypeActive" Hidden="false" Disabled="false" Closable="false" Draggable="true"
runat="server" Title="Contact Type" Frame="false" Collapsible="false" Collapsed="true"
AnchorHorizontal="82%" Cls="my-header" MarginSpec="0 0 5 0">
</ext:Portlet>
</Items>
</ext:PortalColumn>
</Items>
</ext:FieldSet>
</Items>

</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>




Please provide me the solution that i can able to hide the [id]Active even after dropping to the pnl General.

please look into the attached images so you can clearly find the issue what i gonna looking for.

Daniil
Nov 05, 2014, 12:23 PM
Hi @iansriley,

This "dropTop" function, this line:

Ext.getCmp('p' + movingCtrl + 'Active').hide();

It has to be executed after "return false;". Because returning false means cancelling a drop operation, that means restoring the dragged component, i.e. showing that again.

You can replace that line with

setTimeout("Ext.getCmp('p" + movingCtrl + "Active').hide()", 1);

It appears to be working.

iansriley
Nov 05, 2014, 1:23 PM
Awsome, this is working fine....

Thanks Danil...