[CLOSED] Custom control extending DropDownField IE/Firefox

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [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

        [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

    <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>
    Last edited by fabricio.murta; Nov 01, 2016 at 7:32 PM.
  2. #2
    Hello Edgar!

    I don't see your ASPX code referencing to the PickerField component you created at any point. Besides, the ASPX page is throwing errors on load, as if something really basic is missing. Do you really need all this (fieldset with different fields, plus a grid with page proxy and remote sort, also a paging toolbar, and absolutely no data) to reproduce the issue?

    I'm a little clueless for where I should start looking for errors here... Maybe you can create a fresh Ext.NET project and try pasting your code there, see if it works. Also providing the namespaces you used on your class definition could be final in identifying any missing parts of the example.

    I was expecting to see something like:

    <%@ Register Namespace="My.Project.PickerField" TagPrefix="customPicker" %>
    and then

    <customPicker:PickerField ... />
    In your sample. But maybe there's a different approach you are using that I couldn't understand in your test case.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Yes, we need all that - that grid will load certain items. I did say we'll focus for now on the picker disappearing in IE as opposed to Firefox/Chrome.

    Fabricio, just add a simple aspx referencing that control, please. My apologies, I forgot to add it. I did create a separate project, just forgot to add the Default.aspx.

    <customPicker:PickerField runat="server" />
    The PickerTable.aspx is loaded by the PickerField. It's not my code, I just have to make it work :)
  4. #4
    Hello!

    I still can't get the sample to work. Can you provide the default.aspx code? Again, for such examples, how you are pulling the namespaces or defining the controls is important.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Here you go:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebAppTestPicker.Default" %>
    
    <%@ Register Assembly="WebAppTestPicker" Namespace="WebAppTestPicker" TagPrefix="custom" %>
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" />
            <custom:PickerField ID="testpicker" runat="server" />
        </form>
    </body>
    </html>
  6. #6
    Hello Edgar!

    Sometimes registering a server-side control can be a headache!.. It only worked here once I either set it up from Web.config. And then I could make it work with another tag prefix not custom. Probably it required a Web.config change before it worked at all, and no project clean/rebuild/reopen worked at all. I remember having problems like that with server controls in the past and they worked just like the same: out of the blue.

    Once it works, fortunately, it does not seem to break again.

    Now to the brief part of the whole story.

    So much for a missing ID="<something>" in your custom control! :)

    Run your code with debug enabled on Visual Studio. You'll notice it will break in a strange way you can't really "break" at that point and investigate the code, but you can peek the window behind the error message and see it tries to call a #{}.collapse.

    If you search your code, you'll see it using this.ID to fill up this (lines 76 and 93 of your code). So give your custom control an ID and voila.

    <custom:PickerField ID="test" runat="server" />
    Well, anyway, this looks too easy to be true but at least at this point I can run the page. If that's still not the issue you are having, please let us know and give a step-by-step to reproduce the exact problem, and we'll try to fix what is not working there.

    I can have the sample show up consistently in IE.

    Just a suggestion, you could instead of this, maybe, refactor your control to use a proper .ascx file instead of redirecting to an .aspx from code behind. There are some limitations on server controls that work just fine in custom (.ascx) controls, and referencing them from the page (with Src= instead of Assembly=) seems to work much better and avoid headaches in the future.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 6
    Last Post: Dec 24, 2014, 9:37 AM
  2. [CLOSED] Extending Ext.net Control / Creating Custom Control
    By ljankowski in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 01, 2014, 6:52 PM
  3. [CLOSED] Creating a control by extending the ext:TextField control
    By Shanth in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Sep 12, 2011, 2:58 PM
  4. [CLOSED] Possible to Extending Custom Search Combo Box
    By rbarr in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 01, 2011, 1:39 PM
  5. Extending Ext.Net.TextField Control
    By David Pelaez in forum 1.x Help
    Replies: 1
    Last Post: Dec 22, 2010, 10:43 AM

Tags for this Thread

Posting Permissions