Nov 04, 2014, 4:56 PM
[CLOSED] Ext.net Portlet Hide/Show Problem
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:
please look into the attached images so you can clearly find the issue what i gonna looking for.
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;
}
}
<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.hide(); 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 look into the attached images so you can clearly find the issue what i gonna looking for.
Last edited by Daniil; Nov 07, 2014 at 10:03 AM.
Reason: [CLOSED]
