PDA

View Full Version : [CLOSED] Refresh Problem with self made Usercontrols (Ajax Combobox)



xtoolz
Sep 26, 2015, 7:51 AM
Good Morning all

I need help on a Problem with a self made Combobox. The use of this control is quite simple: i need to select addresses from a large address database. the selection should be done while tipping...

the control works fine on several pages we have in the project. but on one page - a window with tabs - a nasty problem appears...
the control isn't visible after switching the tab. i tried some .doLayout() on some events, but nothing helped (see Capture1 & Capture2)

2424824249

I tried to simplify the code to be used as example, i hope it works...

So, first the Window


<ext:Window runat="server" ID="winOrder" Title="OrderWindowDetailTitle" Layout="Fit" Hidden="false" Closable="False" Modal="True" Resizable="False" Draggable="True" Width="750" Height="500" PageX="40" PageY="40">
<TopBar>
<ext:Toolbar runat="server" StyleSpec="padding-bottom:0px;">
<Items>
<ext:TabStrip runat="server">
<Items>
<ext:Tab Text="Summary" ActionItemID="pnlOrder" Icon="Information" />
<ext:Tab Text="Notices" ActionItemID="pnlAddInfo" Icon="Note" />
<ext:Tab Text="Events" ActionItemID="pnlEvents" Icon="PageWhiteLightning" />
<ext:Tab Text="DocumentsFull" ActionItemID="pnlDocuments" Icon="PageWhiteStack" />
<ext:Tab Text="Declaration" ActionItemID="pnlDeclaration" Icon="Page" />
<ext:Tab Text="Invoice" ActionItemID="pnlInvoice" Icon="Money" />
<ext:Tab Text="OrderHistory" ActionItemID="pnlHistory" Icon="ApplicationCascade" />
</Items>
</ext:TabStrip>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<%--Order--%>
<ext:FormPanel runat="server" ID="pnlOrder" Header="false" Layout="Column" Frame="True">
<Items>
<ext:Container runat="server" ID="cntOrderLeft" ColumnWidth="0.5" Layout="Form">
<Items>
<%--Reference--%>
<ext:TextField runat="server" ID="txtReference" FieldLabel="Reference" LabelAlign="Top" ReadOnly="true" Width="200" PaddingSpec="10 0 10 115" />
<%--Status--%>
<ext:ComboBox runat="server" ID="cboOrderStatus" ForceSelection="true" DisplayField="Value" ValueField="Key" FieldLabel="OrderState" QueryMode="Local" TypeAhead="true" Width="305" PaddingSpec="0 0 7 10">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Value" />
<ext:ModelField Name="Key" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>

<%--VDL--%>
<ext:Container runat="server" ID="contVDL" Frame="True">
<Content>
<ucexternalcontact:externalcontact ID="ucVDL" runat="server" IsInternalAddress="false" FieldLabelText="VDL" width="413" MandatoryField="False" PaddingSpec="1 0 1 5" />
</Content>
</ext:Container>


<%--Besteller--%>
<ext:Container runat="server">
<Content>
<uccontact:contact ID="ucOrderingParty" runat="server" IsInternalAddress="True" FieldLabelText="OrderingParty" Width="413" PaddingSpec="1 0 1 5" />
</Content>
</ext:Container>


<%--Debitor--%>
<ext:Container runat="server">
<Content>
<uccontact:contact ID="ucDebitor" runat="server" IsInternalAddress="True" FieldLabelText="DebitorInt" Width="413" PaddingSpec="1 0 1 5" />
</Content>
</ext:Container>


<%--Incoterm--%>
<ext:ComboBox runat="server" ID="comIncotermVersion" DisplayField="Value" ValueField="Key" ForceSelection="True" FieldLabel="IncotermVersion" QueryMode="Local" TypeAhead="true" Width="305" PaddingSpec="7 0 7 10">
<Store>
<ext:Store ID="storeIncotermVersion" runat="server">
<Model>
<ext:Model ID="modelIncotermVersion" runat="server">
<Fields>
<ext:ModelField Name="Value" />
<ext:ModelField Name="Key" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>

<ext:TextField runat="server" ID="txtIncotermCity" FieldLabel="IncotermsCity" Width="305" PaddingSpec="7 0 7 10 " />

<%--Trader--%>
<ext:Container runat="server">
<Content>
<ucexternalcontact:externalcontact ID="ucTrader" runat="server" IsInternalAddress="false" FieldLabelText="Trader" width="413" MandatoryField="False" PaddingSpec="1 0 1 5" />
</Content>
</ext:Container>


<%--DeliveryAddress--%>
<ext:Container runat="server">
<Content>
<ucexternalcontact:externalcontact ID="ucDeliveryAddress" runat="server" IsInternalAddress="false" FieldLabelText="DeliveryAddress" width="413" MandatoryField="False" PaddingSpec="1 0 1 5" />
</Content>
</ext:Container>


</Items>
</ext:Container>
<%--End Left Container--%>


<%--Cost Center--%>
<ext:Container runat="server" ID="cntOrderRight" ColumnWidth="0.5" Layout="Form">
<Items>
<ext:TextField runat="server" ID="txtRocheOrderNumber" FieldLabel="RocheOrderNumber" LabelAlign="Top" Width="200" PaddingSpec="10 0 7 0 " />

<ext:TextField runat="server" ID="txtCostCenter" FieldLabel="Kostenstelle" ReadOnly="True" LabelAlign="Top" Width="150" PaddingSpec="94 0 0 0">
<RightButtons>
<ext:Button runat="server" ID="ChangeCostCenterButton" Icon="ReportEdit" ToolTip="Change"></ext:Button>
</RightButtons>
</ext:TextField>

<%--Incoterm Version--%>
<ext:FieldSet runat="server" Border="false" PaddingSpec="5 0 0 0 ">

<Items>
<ext:Radio runat="server" ID="radIncoterm2010" FieldLabel="Incoterm2010c" Checked="true" PaddingSpec="0 0 -8 0" />
<ext:Radio runat="server" ID="radIncoterm2000" FieldLabel="Incoterm2000" />

</Items>
</ext:FieldSet>

<%--Invoice Address--%>
<ext:Container runat="server">
<Content>
<ucexternalcontact:externalcontact ID="ucInvoiceAddress" runat="server" IsInternalAddress="false" FieldLabelText="InvoiceAddress" width="413" MandatoryField="False" PaddingSpec="1 0 1 5" />
</Content>
</ext:Container>



<%--Freight Invoice Receiver--%>
<ext:Container runat="server">
<Content>
<ucexternalcontact:externalcontact ID="ucFreightInvoiceReceiver" runat="server" IsInternalAddress="false" FieldLabelText="FreightInvoiceReceiver" width="413" MandatoryField="False" PaddingSpec="1 0 1 5" />
</Content>
</ext:Container>


</Items>
</ext:Container>
<%--End Right Container--%>
</Items>
</ext:FormPanel>

<%--Additional Info--%>
<ext:FormPanel runat="server" ID="pnlAddInfo" Header="false">
<Items>
</Items>

</ext:FormPanel>

<%--Events--%>
<ext:FormPanel runat="server" ID="pnlEvents" Header="false">
<Items>
</Items>
</ext:FormPanel>

<%--Documents--%>
<ext:FormPanel runat="server" ID="pnlDocuments" Header="false" Layout="Fit">

<Items>
</Items>

</ext:FormPanel>

<%--Declaration--%>
<ext:FormPanel runat="server" ID="pnlDeclaration" Header="false">
<Items>
</Items>

</ext:FormPanel>

<%--Invoice--%>
<ext:FormPanel runat="server" ID="pnlInvoice" Header="false">
<Items>
</Items>

</ext:FormPanel>

<%--History--%>
<ext:FormPanel runat="server" ID="pnlHistory" Header="false">
<Items>
</Items>

</ext:FormPanel>

</Items>
<Buttons>

<sisa:SaveButton ID="cmdSaveOrder" runat="server" UseDefaultShortcutKey="false" Text="Save">

</sisa:SaveButton>
<sisa:CancelButton ID="cmdWinOrderClose" runat="server" UseDefaultShortcutKey="false" Text="Close">

</sisa:CancelButton>
</Buttons>
</ext:Window>

the control:


Imports Ext.Net

Namespace View.Address

Public Class ExtContacts
Inherits ProjectBaseUserControl

Public Property IsInternalAddress As Boolean
Public Property SelectedBaseContactId As Guid
Public Property FieldLabelText As String
Public Event OnContactSelected(sender As Object, e As ContactEventArgs)
Public Property MandatoryField As Boolean = False
Public Property AnchorSize As String


''' <summary>
''' The Type of Data to Search.
''' </summary>
''' <remarks></remarks>
Private _addressType As String
Private _isSearchCompany As String

Public WriteOnly Property IsGoogleSearchCompany As String
Set(value As String)
_isSearchCompany = value
End Set
End Property

Public WriteOnly Property AddressType As String
Set(value As String)
_addressType = value
End Set
End Property

Public WriteOnly Property SetReadOnly As Boolean
Set(value As Boolean)
cboAddress.ReadOnly = value
End Set
End Property


<DirectMethod>
Public Sub AddressSelected(sender As Object, e As DirectEventArgs)
SelectedBaseContactId = Nothing

If cboAddress.SelectedItems.Count > 0 Then
SelectedBaseContactId = Helper.ParseGuidString(cboAddress.SelectedItems(0) .Value)
Dim newE As New ContactEventArgs(SelectedBaseContactId, cboAddress.SelectedItems(0).Text)
RaiseEvent OnContactSelected(sender, newE)
End If

End Sub

Private Sub Page_Init(sender As Object, e As System.EventArgs) Handles Me.Init
cboAddress.FieldLabel = CType(IIf(String.IsNullOrEmpty(FieldLabelText), String.Empty, FieldLabelText), String)
cboAddress.IndicatorIcon = Icon.BulletRed
If MandatoryField Then
cboAddress.ShowIndicator()
Else
cboAddress.HideIndicator()
End If

Dim ap = CType(storeAddress.Proxy.FirstOrDefault, AjaxProxy)
ap.ExtraParams.Add(New Ext.Net.Parameter("AddressType", _addressType))
ap.ExtraParams.Add(New Ext.Net.Parameter("IsSearchCompany", _isSearchCompany))
If Not String.IsNullOrWhiteSpace(AnchorSize) Then
pnlOuter.DefaultAnchor = AnchorSize
End If
End Sub

Public Class ContactEventArgs
Inherits System.EventArgs

Public CurrentContactID As Guid
Public ContactName As String


Public Sub New(contactId As Guid, name As String)
CurrentContactID = contactId
ContactName = name
End Sub
End Class

End Class
End Namespace

it's markup


<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="ExtContacts.ascx.vb" Inherits="CUST.Roche.Import.View.View.Address.ExtContacts"

<script type="text/javascript">
function createExtCSS() {

Ext.util.CSS.createStyleSheet('.ExtConTrigger { background-image: url(' + baseUrl + 'images/externalcustomer-trigger.gif) !important;}');
}

</script>
<ext:Panel ID="pnlOuter" runat="server" Border="False" AutoHeight="True" Layout="AnchorLayout" DefaultAnchor="75%" BodyStyle="background:transparent">
<Listeners>
<BeforeRender Handler="createExtCSS();"></BeforeRender>
</Listeners>

<Items>
<ext:Hidden runat="server" ID="hidSelectedId"/>
<ext:ComboBox ID="cboAddress" runat="server" DisplayField="DisplayField" ValueField="Id" TypeAhead="false" HideBaseTrigger="true" Width="270" PageSize="5" MinChars="3">
<ListConfig LoadingText="Searching">
<ItemTpl runat="server">
<Html>
<div class="search-item">
{SalutationName} {FirstName}
<h3>{Name}</h3><br/>
<div class="search-subitem">
<table style="width: 100%">
<tr>
<td style="width: 20%">Abt.</td>
<td>Bau / Raum</td>
</tr>
<tr>
<td style="width: 20%">{Department}</td>
<td>{Building} {Room}</td>
</tr>
</table>
</div>
</div>
</Html>
</ItemTpl>
</ListConfig>
<Store>
<ext:Store ID="storeAddress" runat="server" AutoLoad="false">
<Proxy>
<ext:AjaxProxy Url="Contacts.ashx">
<ActionMethods Read="POST"/>
<Reader>
<ext:JsonReader Root="contacts" TotalProperty="total"/>
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server" Root="contacts" TotalProperty="total" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id"/>
<ext:ModelField Name="IsInternal" Type="Boolean"/>
<ext:ModelField Name="IsExternal" Type="Boolean"/>
<ext:ModelField Name="DisplayField"/>
<ext:ModelField Name="Name"/>
<ext:ModelField Name="FirstName"/>
<ext:ModelField Name="Salutation"/>
<ext:ModelField Name="Department"/>
<ext:ModelField Name="Room"/>
<ext:ModelField Name="Building"/>
<ext:ModelField Name="Phone"/>
<ext:ModelField Name="City"/>
<ext:ModelField Name="Street"/>
<ext:ModelField Name="ZIP"/>
<ext:ModelField Name="Country"/>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<DirectEvents>
<Select OnEvent="AddressSelected"/>
</DirectEvents>


<Triggers>
<ext:FieldTrigger HideTrigger="false" Qtip="TooltipSearchCompanyOrEmployee" IconCls="ExtConTrigger"/>
</Triggers>
<Listeners>
<TriggerClick Handler="showExtContactWindow(item,trigger,index,tag,e);" />
</Listeners>
</ext:ComboBox>
</Items>
</ext:Panel>

the handler


Imports System.Web
Imports Ext.Net
Imports SISA.Architecture.Core
Imports CUST.Roche.Import.View.Services.RocheService
Imports CUST.Roche.Import.Shared.Constants

Public Class ExtContacts
Implements System.Web.IHttpHandler
Implements IRequiresSessionState

Sub ProcessRequest(context As HttpContext) Implements IHttpHandler.ProcessRequest
context.Response.ContentType = "text/json"

Dim start = 0
Dim limit = 10
Dim sort As String = String.Empty
Dim dir As String = String.Empty
Dim query As String = String.Empty
Dim _addressType As String = String.Empty
Dim _isSearchCompany As Boolean? = Nothing

If Not String.IsNullOrEmpty(context.Request("start")) Then
start = Integer.Parse(context.Request("start"))
End If
If Not String.IsNullOrEmpty(context.Request("limit")) Then
limit = Integer.Parse(context.Request("limit"))
End If
If Not String.IsNullOrEmpty(context.Request("sort")) Then
sort = context.Request("sort")
End If
If Not String.IsNullOrEmpty(context.Request("dir")) Then
dir = context.Request("dir")
End If
If Not String.IsNullOrEmpty(context.Request("query")) Then
query = context.Request("query")
End If

If Not String.IsNullOrEmpty(context.Request("AddressType")) Then
_addressType = context.Request("AddressType")
End If

If Not String.IsNullOrEmpty(context.Request("IsGoogleSearchCompany")) Then
_isSearchCompany = CType(context.Request("IsGoogleSearchCompany"), Boolean?)
End If

'Dim proxy = ServiceClient.Create(Of ImportInternalClient)()
'Dim contList As List(Of ContactSearchDTO) = proxy.ExternalContactSearchList(start, limit, sort, dir, query, _addressType, _isSearchCompany)

Dim retList As Paging(Of ContactSearchDTO) = DTOPaging(start, limit, sort, dir, query, contList)

Dim rsp As String = String.Format("{{total:{1},'contacts':{0}}}", JSON.Serialize(retList.Data), retList.TotalRecords)

context.Response.Write(rsp)
End Sub


Public Shared Function DTOPaging(start As Integer, limit As Integer, sort As String, dir As String, filter As String, data As List(Of ContactSearchDTO)) As Paging(Of ContactSearchDTO)

Dim contList As List(Of ContactSearchDTO) = data
'Filtering
If (Not String.IsNullOrEmpty(filter) AndAlso (filter <> "*")) Then
contList.RemoveAll(Function(x) Not x.Name.ToLower().StartsWith(filter.ToLower()))
End If


If ((start + limit) > contList.Count) Then
limit = (contList.Count - start)
End If

Dim rangeCont As List(Of ContactSearchDTO)
If start > 0 OrElse limit > 0 Then
rangeCont = contList.GetRange(start, limit)
Else
rangeCont = contList
End If


Return New Paging(Of ContactSearchDTO)(rangeCont, contList.Count)

End Function


ReadOnly Property IsReusable As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property


End Class

with his markup


<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="ExtContacts.ascx.vb" Inherits="CUST.Roche.Import.View.View.Address.ExtContacts"

<script type="text/javascript">
function createExtCSS() {

Ext.util.CSS.createStyleSheet('.ExtConTrigger { background-image: url(' + baseUrl + 'images/externalcustomer-trigger.gif) !important;}');
}

</script>
<ext:Panel ID="pnlOuter" runat="server" Border="False" AutoHeight="True" Layout="AnchorLayout" DefaultAnchor="75%" BodyStyle="background:transparent">
<Listeners>
<BeforeRender Handler="createExtCSS();"></BeforeRender>
</Listeners>

<Items>
<ext:Hidden runat="server" ID="hidSelectedId"/>
<ext:ComboBox ID="cboAddress" runat="server" DisplayField="DisplayField" ValueField="Id" TypeAhead="false" HideBaseTrigger="true" Width="270" PageSize="5" MinChars="3">
<ListConfig LoadingText="Searching">
<ItemTpl runat="server">
<Html>
<div class="search-item">
{SalutationName} {FirstName}
<h3>{Name}</h3><br/>
<div class="search-subitem">
<table style="width: 100%">
<tr>
<td style="width: 20%">Abt.</td>
<td>Bau / Raum</td>
</tr>
<tr>
<td style="width: 20%">{Department}</td>
<td>{Building} {Room}</td>
</tr>
</table>
</div>
</div>
</Html>
</ItemTpl>
</ListConfig>
<Store>
<ext:Store ID="storeAddress" runat="server" AutoLoad="false">
<Proxy>
<ext:AjaxProxy Url="ExtContacts.ashx">
<ActionMethods Read="POST"/>
<Reader>
<ext:JsonReader Root="contacts" TotalProperty="total"/>
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server" Root="contacts" TotalProperty="total" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id"/>
<ext:ModelField Name="IsInternal" Type="Boolean"/>
<ext:ModelField Name="IsExternal" Type="Boolean"/>
<ext:ModelField Name="DisplayField"/>
<ext:ModelField Name="Name"/>
<ext:ModelField Name="FirstName"/>
<ext:ModelField Name="Salutation"/>
<ext:ModelField Name="Department"/>
<ext:ModelField Name="Room"/>
<ext:ModelField Name="Building"/>
<ext:ModelField Name="Phone"/>
<ext:ModelField Name="City"/>
<ext:ModelField Name="Street"/>
<ext:ModelField Name="ZIP"/>
<ext:ModelField Name="Country"/>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<DirectEvents>
<Select OnEvent="AddressSelected"/>
</DirectEvents>


<Triggers>
<ext:FieldTrigger HideTrigger="false" Qtip="TooltipSearchCompanyOrEmployee" IconCls="ExtConTrigger"/>
</Triggers>
<Listeners>
<TriggerClick Handler="showExtContactWindow(item,trigger,index,tag,e);" />
</Listeners>
</ext:ComboBox>
</Items>
</ext:Panel>

I hope the code is readable and someone is able to reproduce the issue.
We are under pressure an need a solution on this as soon as we can :-/

Kind regards
Peter

Daniil
Sep 26, 2015, 9:10 AM
Hi Peter,

Could you, please, post a Page Sources (Ctrl+U in a browser)? It should be easier to run here, rather than putting all the code snippets together.

xtoolz
Sep 26, 2015, 11:03 AM
Hi Daniil
Thank's for the quick answer also on the weekend :-)
Well, I found out that the problem exists on my home office pc ?!
I did a test now on my office pc and it seems to be ok - that makes me a bit uncertain...

I send you a link to our test server (mail sent at hello@ext.net), there's the newest version available - maybe you see something 'unusual' in on the page ?

Best regards and a wonderful weekend
Peter

Daniil
Sep 26, 2015, 3:12 PM
Well, I found out that the problem exists on my home office pc ?!

Maybe, there is a difference in browser that you are testing with? If it is IE, please use the compatibility mode is turned off.


I send you a link to our test server (mail sent at hello@ext.net), there's the newest version available - maybe you see something 'unusual' in on the page ?

Unfortunately, I cannot deal with any private information unless our manager allows it. Though, the goal is to keep everything public. If there is absolutely no way to resolve the issue publicly, then we could consider dealing with that in private in some extent. The current situation doesn't look to be such a case.

Yes, sometimes you can just explain the problem, post code snippets and it is enough for us to determine/guess what is going wrong. Unfortunately, it is not enough in the current case. The best way would be providing us with a simplified test case that would be possible to copy/paste as it is and run. I am pretty sure the amount of minimum required code is going to be small. For example, I am almost sure that ExtContacts.ashx is not required. Please try to remove an AjaxProxy at all and see if the issue is still reproducible or not.

I think starting from the original code and reducing step-by-step will quite quickly produce a simplified test case or even cause finding out the exact piece of problematic code/configuration. The technique is explained in details here:
How to prepare a sample
(http://forums.ext.net/showthread.php?13672&p=56687&viewfull=1#post56687)