Sep 26, 2015, 7:51 AM
[CLOSED] Refresh Problem with self made Usercontrols (Ajax Combobox)
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)
I tried to simplify the code to be used as example, i hope it works...
So, first the Window
We are under pressure an need a solution on this as soon as we can :-/
Kind regards
Peter
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)
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 handlerImports 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
Last edited by Daniil; Oct 02, 2015 at 2:23 PM.
Reason: [CLOSED]