[CLOSED] Custom control extending DropDownField IE/Firefox
We have a control extending DropDownField - it used as a picker for various type of items. After upgrading to 4.1, it stopped working altogether on IE, while on Firefox and Chrome it works every second time :) I'll focus on the IE not working for now. The picker shows a window. In IE it disappears after a couple of seconds. Why and how can we fix it?
I've tried to remove as much code as possible, but it's still quite long.
PickerField.cs
Code:
[DefaultProperty( "Text" )]
[ToolboxData( "<{0}:PickerField runat=server></{0}:PickerField>" )]
public class PickerField : Ext.Net.DropDownField
{
[Browsable( true )]
[DefaultValue( false )]
[Category( "Behavior" )]
public bool MultipleSelection
{
get;
set;
}
[Browsable( true )]
[DefaultValue( false )]
[Category( "Behavior" )]
public bool SetTextAsValue
{
get;
set;
}
public PickerField()
{
Editable = true;
EnforceMaxLength = true;
SetTextAsValue = false;
}
Ext.Net.Window aWindowPicker;
protected override void OnInit( EventArgs e )
{
this.Mode = DropDownMode.ValueText;
Listeners.Expand.Handler = "this.picker.setWidth(570);";
if ( IsRemoteValidation )
{
Listeners.Blur.Handler = "this.remoteValidate();";
}
if ( !Editable && AllowBlank )
{
FieldTrigger.Config aTriggerConfig = new FieldTrigger.Config();
aTriggerConfig.Icon = Ext.Net.TriggerIcon.Clear;
aTriggerConfig.QTip = "Clear";
Triggers.Add( new FieldTrigger( aTriggerConfig ) );
Listeners.TriggerClick.Handler = "this.clear();";
}
this.EnableKeyEvents = true;
if ( MultipleSelection )
{
Listeners.KeyUp.Handler = "item._value = '';";
Listeners.KeyUp.Buffer = 500;
}
else
if ( !MultipleSelection && SetTextAsValue )
{
Listeners.KeyUp.Handler = "item._value = item.rawValue;";
Listeners.KeyUp.Buffer = 500;
}
aWindowPicker = new Ext.Net.Window();
aWindowPicker.ID = this.ID + "_windowPicker";
aWindowPicker.Modal = false;
aWindowPicker.ButtonAlign = Ext.Net.Alignment.Right;
aWindowPicker.Title = "Books";
aWindowPicker.Layout = "FitLayout";
aWindowPicker.Width = 570;
aWindowPicker.Height = 370;
aWindowPicker.Listeners.Close.Handler = string.Format( "#{{{0}}}.collapse();", this.ID );
if ( MultipleSelection )
{
StringBuilder aSB = new StringBuilder();
aSB.AppendFormat( "var result = #{{{0}}}.iframe.dom.contentWindow.GetPickerSelectedItems();#{{{1}}}.setValue(result.Value,result.Text);", aWindowPicker.ID, this.ID );
Ext.Net.Button btnOK = new Ext.Net.Button();
btnOK.Text = "OK";
btnOK.Listeners.Click.Handler = aSB.ToString();
btnOK.ID = this.ID + "_btnOK";
aWindowPicker.Buttons.Add( btnOK );
}
Ext.Net.Button aCloseButton = new Ext.Net.Button();
aCloseButton.Text = "Close";
aCloseButton.Listeners.Click.Handler = string.Format( "#{{{0}}}.collapse();", this.ID );
aCloseButton.ID = this.ID + "_btnClose";
aWindowPicker.Buttons.Add( aCloseButton );
aWindowPicker.Loader = new Ext.Net.ComponentLoader();
aWindowPicker.Loader.DisableCaching = false;
aWindowPicker.Loader.Mode = Ext.Net.LoadMode.Frame;
aWindowPicker.Loader.TriggerEvent = "show";
aWindowPicker.Loader.ReloadOnEvent = true;
aWindowPicker.Loader.LoadMask.ShowMask = true;
aWindowPicker.Loader.LoadMask.Msg = "Loading";
aWindowPicker.Loader.ID = this.ID + "_loader";
aWindowPicker.Loader.Url = ResolveUrl( HttpUtility.UrlPathEncode( string.Format( "PickerTable.aspx?Type={0}&Multiple={1}&ParentControl={2}", "Books", MultipleSelection.ToString(), this.ID ) ) );
aWindowPicker.Loader.IsDynamic = true;
if ( MultipleSelection )
{
aWindowPicker.Loader.Listeners.BeforeLoad.Handler = string.Format( "var initialValuesUrl = GetPickerInitialValuesUrl('{0}'); if(initialValuesUrl != null) options.url+='&'+initialValuesUrl;", this.ClientID.Remove( 0, 4 ) );
}
Component.Add( aWindowPicker );
base.OnInit( e );
}
protected override void OnLoad( EventArgs e )
{
if ( !Page.IsPostBack )
{
if ( string.IsNullOrEmpty( TriggerCls ) )
{
TriggerIcon = Ext.Net.TriggerIcon.SimpleMagnify;
}
}
base.OnLoad( e );
}
}
PickerTable.aspx
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server">
</ext:ResourceManager>
<ext:Hidden ID="edtParentControl" runat="server"></ext:Hidden>
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:FieldSet runat="server" ID="fldSetSearch" Title="Search" Layout="FormLayout" Collapsible="false" Region="North" MarginSpec="0 5 0 5" PaddingSpec="0 5 5 5">
<Items>
<ext:FieldContainer runat="server" FieldLabel="Criteria">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch"></ext:HBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:SelectBox ID="cmbSearchCriteria" runat="server" MarginSpec="0 5 0 0" ForceSelection="True"></ext:SelectBox>
<ext:TextField runat="server" ID="edtFilter" Flex="1" MaxLength="100" MarginSpec="0 5 0 0"></ext:TextField>
<ext:Button runat="server" ID="btnSearch" Text="Search">
</ext:Button>
</Items>
</ext:FieldContainer>
</Items>
<KeyMap ID="KeyMap1" runat="server">
<Binding>
<ext:KeyBinding Handler="#{btnSearch}.fireEvent('click')">
<Keys>
<ext:Key Code="ENTER" />
</Keys>
</ext:KeyBinding>
</Binding>
</KeyMap>
</ext:FieldSet>
<ext:GridPanel Frame="false" ID="gridItems" runat="server" Layout="FitLayout" Region="Center" EmptyText="NoDataFound">
<Store>
<ext:Store runat="server" AutoLoad="true" RemotePaging="true" RemoteSort="true" ID="storePicker">
<Proxy>
<ext:PageProxy>
</ext:PageProxy>
</Proxy>
<Sorters>
<ext:DataSorter Direction="ASC"></ext:DataSorter>
</Sorters>
<Model>
<ext:Model runat="server" ID="modelPicker">
</ext:Model>
</Model>
</ext:Store>
</Store>
<View>
<ext:GridView runat="server" LoadingText="Loading"></ext:GridView>
</View>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" HideRefresh="True" />
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Viewport>
</div>
</form>
</body>
</html>