What's New?

[OPEN] [#1220] [3.2.1] Window Close Issue

  1. #1
    Jan 11, 2016, 3:58 AM

    [OPEN] [#1220] [3.2.1] Window Close Issue

    Good morning.

    I build my page as follows: 

        <ext:Viewport runat="server" Layout="FitLayout">
        <Items>
            <ext:GridPanel
                runat="server"
                ID="SearchResultGV"
                ClientIDMode="Static"
                EmptyText="No result found"
                Title="Membership Inquiry"
                BodyCls="my-carousel"
                AutoScroll="true"
                Icon="Magnifier"
                Frame="true">
....                                        
            </ext:GridPanel>
        </Items>
    </ext:Viewport>

<ext:Window 
    ID="OtherSearchOptionsWindow" 
    runat="server" 
    Icon="User"
    Hidden="true"
    Closable="true"
    DefaultButtonStopEvent="true"
    MarginSpec="0 0 0 0"
    PaddingSpec="0 0 0 0"
    Title="Search Options"
    Width="850"
    Height="500"
    ClientIDMode="Static"
    Resizable="false"
    Layout="FitLayout">
        <Listeners>
            <Show Handler="positionWindow(this);"/>
        </Listeners>
        <Items>
            <ext:FormPanel 
                ID="OtherSearchOptionsWindowPnl" 
                runat="server" 
                MarginSpec="0 0 0 0"
                PaddingSpec="0 0 0 0"
                Frame="false"
                ButtonAlign="Right"
                Layout="FitLayout">
....  
            </ext:FormPanel>
        </Items>
</ext:Window>
    1. Window is hidden by default and this property set false based on user request.
    2. When window shown, the user can perform search in textbox inside the form panel.
    3. This textbox respond to search action by simply Enter key hit. 

    <ext:TextField
    runat="server"
    LabelAlign="Left"
    Width="350"
    ClientIDMode="Static"
    ID="txtSearchOtherOptions"
    AllowBlank="false"  
    FieldLabel="Search Criteria"
    LabelWidth="125">
        <KeyMap runat="server">
            <Binding>
                <ext:KeyBinding Handler="if (!#{txtSearchOtherOptions}.validate()) { Ext.Msg.alert('Error','The Search Criteria field is required'); return false; } else { #{DirectMethods}.searchOtherOptions();  }">
                    <Keys>
                        <ext:Key Code="Enter" />
                    </Keys>
                </ext:KeyBinding>
            </Binding>
        </KeyMap>
</ext:TextField>
    4. When I perform search operation, I display result in same window.
    5. When I hit Enter key to perform search operation, the result display successfully in GridPanel inside window but the window GET CLOSED automatically.
    6. If I want to see the result of the search operation, I should open the window again.

    Why I'm getting this strange behavior?
  2. #2
    Jan 11, 2016, 3:45 PM
    Hello @Alaswad!

    It is hard to say with the information you provided. The code you pasted looks right. What I can guess is that you didn't use an IsPostBack or !X.IsAjaxRequest to your Page_Load and the code to close the window is parsed every time you send a postback.

    If this is not the case, I am afraid we will require you to provide a test case reproducing the issue, so we can pinpoint the cause.
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Jan 12, 2016, 6:13 AM
    Dear fabricio.murta,

    Your suggestion does not work for me, IsPostBack is already there.

    Here the test case: 

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestCaseWithoutMaster.aspx.vb" Inherits="Apps_UC_TestCaseWithoutMaster" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function positionWindow(win) {
            win.alignTo(Ext.getBody(), 'c-c?');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="NeptuneTouch" DirectMethodNamespace="MainPage"/>
    <ext:Viewport runat="server" Layout="FitLayout">
        <Items>
            <ext:GridPanel
                runat="server"
                ID="SearchResultGV"
                ClientIDMode="Static"
                EmptyText="No result found"
                Title="Inquiry"
                BodyCls="my-carousel"
                AutoScroll="true"
                Icon="Magnifier"
                Frame="true">
	            <Store>
		            <ext:Store ID="SearchResultGVStore" ClientIDMode="Static" runat="server">
			            <Model>
				            <ext:Model runat="server"  IDProperty="col1">
					            <Fields>
						            <ext:ModelField Name="col1" />
						            <ext:ModelField Name="col2" />
						            <ext:ModelField Name="col3" />                                
					            </Fields>
				            </ext:Model>
			            </Model>
		            </ext:Store>
	            </Store>
	            <ColumnModel runat="server">
		            <Columns>
			            <ext:RowNumbererColumn Header="#" runat="server"  Align="Center" />           
			            <ext:Column runat="server" Width="130" Align="Center" Text="Name" DataIndex="col1" >
                            <Filter>
                                <ext:NumberFilter />
                            </Filter>
                        </ext:Column>
                        <ext:Column runat="server" Flex="1" Text="Name" DataIndex="col2" >
                            <Filter>
                                <ext:StringFilter />
                            </Filter>
                        </ext:Column>
                        <ext:Column runat="server" Flex="1" Text="Name" DataIndex="col3" >
                            <Filter>
                                <ext:StringFilter />
                            </Filter>
                        </ext:Column>
		            </Columns>
	            </ColumnModel> 
                <SelectionModel>
                    <ext:CheckboxSelectionModel  runat="server" Mode="Single" />                   
                </SelectionModel>
	            <BottomBar>
		            <ext:PagingToolbar runat="server" />
	            </BottomBar> 
	            <TopBar>
		            <ext:Toolbar Layout="AnchorLayout"  runat="server">
			            <Items>
                            <ext:FieldSet
                                runat="server" 
                                Layout="HBoxLayout"
                                Title="Existing Clients"
                                Height="70" 
                                MarginSpec="0 0 0 10"
                                ButtonAlign="Right">
                                <Defaults>
                                    <ext:Parameter Name="Margin" Value="0 0 0 5" />
                                </Defaults>
                                <Items>
                                    <ext:TextField
                                        runat="server"
                                        LabelAlign="Left"
                                        Width="300"
                                        ClientIDMode="Static"
						                ID="txtSearchByPOBox"
                                        AllowBlank="false"  
						                FieldLabel="P.O.Box No."
                                        LabelWidth="125">
                                            <KeyMap runat="server">
                                                <Binding>
                                                    <ext:KeyBinding Handler="if (!#{txtSearchByPOBox}.validate()) { Ext.Msg.alert('Error','The P.O.Box No. field is required'); return false; } else { #{DirectMethods}.searchByPOBox(''); }">
                                                        <Keys>
                                                            <ext:Key Code="Enter" />
                                                        </Keys>
                                                    </ext:KeyBinding>
                                                </Binding>
                                             </KeyMap>
                                    </ext:TextField>
				                    <ext:Button 
					                    runat="server" 
					                    Icon="Magnifier" >
                                        <Listeners>
                                            <Click Handler="if (!#{txtSearchByMembershipNo}.validate()) { Ext.Msg.alert('Error','The P.O.Box No. field is required'); return false; } else { #{DirectMethods}.searchByPOBox(''); }"></Click>
                                        </Listeners>                         
                                    </ext:Button>
                                    <ext:ToolbarSeparator />
                                    <ext:Button runat="server" Icon="Add" Handler="#{OtherSearchOptionsWindow}.show();" />
                                    <ext:ToolbarFill />

                                    <ext:Button 
                                            runat="server" 
                                            Text="Manage Membership" 
                                            Icon="FolderUser" 
                                            Handler="" 
                                            />
                                    </Items>
                                </ext:FieldSet>
                            

			                </Items>
		            </ext:Toolbar>       
	            </TopBar>                                          
            </ext:GridPanel>
        </Items>
    </ext:Viewport>

    <ext:Window 
    ID="OtherSearchOptionsWindow" 
    runat="server" 
    Icon="User"
    Hidden="true"
    Closable="true"
    DefaultButtonStopEvent="true"
    MarginSpec="0 0 0 0"
    PaddingSpec="0 0 0 0"
    Title="Search Options"
    Width="850"
    Height="500"
    ClientIDMode="Static"
    Resizable="false"
    Layout="FitLayout">
        <Listeners>
            <Show Handler="positionWindow(this);"/>
        </Listeners>
        <Items>
            <ext:FormPanel 
                ID="OtherSearchOptionsWindowPnl" 
                runat="server" 
                MarginSpec="0 0 0 0"
                PaddingSpec="0 0 0 0"
                Frame="false"
                ButtonAlign="Right"
                Layout="FitLayout">
                <FieldDefaults MsgTarget="Side" LabelWidth="120" />
                <Plugins>
                    <ext:DataTip runat="server" />
                </Plugins>
                <Items>
                    <ext:Container runat="server" Layout="FitLayout" >
                        <Items>
                            <ext:GridPanel
	                            runat="server"
                                MarginSpec="0 0 0 0"
                                PaddingSpec="0 0 0 0"                                
	                            ID="OtherSearchResultGV"
	                            ClientIDMode="Static"
	                            EmptyText="No result found"
	                            Header="false"
	                            BodyCls="my-carousel"
                                Layout="FitLayout"
	                            AutoScroll="true"
	                            Icon="Magnifier"
	                            Frame="FALSE">
	                            <Store>
		                            <ext:Store ID="Store1" ClientIDMode="Static" runat="server">
			                            <Model>
				                            <ext:Model runat="server"  IDProperty="col1">
					                            <Fields>
						                            <ext:ModelField Name="col1" />
						                            <ext:ModelField Name="col2" />
						                            <ext:ModelField Name="col3" />                                
					                            </Fields>
				                            </ext:Model>
			                            </Model>
		                            </ext:Store>
	                            </Store>
	                            <ColumnModel runat="server">
		                            <Columns>
			                            <ext:RowNumbererColumn Header="#" runat="server"  Align="Center" />           
			                            <ext:Column runat="server" Width="130" Align="Center" Text="Name" DataIndex="col1" >
                                            <Filter>
                                                <ext:NumberFilter />
                                            </Filter>
                                        </ext:Column>
                                        <ext:Column runat="server" Flex="1" Text="Name" DataIndex="col2" >
                                            <Filter>
                                                <ext:StringFilter />
                                            </Filter>
                                        </ext:Column>
                                        <ext:Column runat="server" Flex="1" Text="Name" DataIndex="col3" >
                                            <Filter>
                                                <ext:StringFilter />
                                            </Filter>
                                        </ext:Column>
		                            </Columns>
	                            </ColumnModel> 
	                            <SelectionModel>
		                            <ext:CheckboxSelectionModel  runat="server" Mode="Single" />                   
	                            </SelectionModel>
	                            <Plugins>
		                            <ext:GridFilters runat="server" />
	                            </Plugins>
	                            <BottomBar>
		                            <ext:PagingToolbar runat="server" />
	                            </BottomBar> 
	                            <TopBar>
		                            <ext:Toolbar Layout="AnchorLayout" MarginSpec="0 10 0 0"  runat="server">
			                            <Items>
				                            <ext:FieldSet
					                            runat="server" 
					                            Layout="HBoxLayout"
					                            Title="Existing Clients"
					                            Height="70" 
					                            MarginSpec="0 0 0 0"
					                            ButtonAlign="Right">
					                            <Defaults>
						                            <ext:Parameter Name="Margin" Value="0 0 0 5" />
					                            </Defaults>
					                            <Items>
						                            <ext:ComboBox ID="ddlSearchOptions" runat="server" Width="350"  LabelAlign="Left" FieldLabel="Search Options">
                                                        <SelectedItems>
                                                            <ext:ListItem Value="col1" />
                                                        </SelectedItems>
							                            <Items>
								                            <ext:ListItem  Text="col1" Value="col1"></ext:ListItem>
								                            <ext:ListItem  Text="col2" Value="col2"></ext:ListItem>
								                            <ext:ListItem  Text="col3" Value="col3"></ext:ListItem>
							                            </Items>                                             
						                            </ext:ComboBox>
						                            <ext:TextField
							                            runat="server"
							                            LabelAlign="Left"
							                            Width="350"
							                            ClientIDMode="Static"
							                            ID="txtSearchOtherOptions"
							                            AllowBlank="false"  
							                            FieldLabel="Search Criteria"
							                            LabelWidth="125">
								                            <KeyMap runat="server">
									                            <Binding>
										                            <ext:KeyBinding Handler="if (!#{txtSearchOtherOptions}.validate()) { Ext.Msg.alert('Error','The Search Criteria field is required'); return false; } else { #{DirectMethods}.searchOtherOptions();  }">
											                            <Keys>
												                            <ext:Key Code="Enter" />
											                            </Keys>
										                            </ext:KeyBinding>
									                            </Binding>
									                        </KeyMap>
						                            </ext:TextField>
						                            <ext:Button 
							                            runat="server" 
							                            Icon="Magnifier" >                        
						                            </ext:Button>
					                            </Items>
					                            </ext:FieldSet>
				                            </Items>
		                            </ext:Toolbar>       
	                            </TopBar>                                          
                            </ext:GridPanel>
                        </Items>
                    </ext:Container>
                </Items>
                <Buttons>
                    <ext:Button ID="btnSelect" runat="server" Icon="BulletGo" Text="Select"  >
                        <Listeners>
                            <Click Handler=""></Click>
                        </Listeners>
                    </ext:Button>
                    <ext:Button runat="server" Icon="Decline" Text="Cancel" Handler="#{OtherSearchOptionsWindow}.close();" />
                </Buttons>
            </ext:FormPanel>
        </Items>
</ext:Window>
    </form>
</body>
</html>
    And here the behind code: 

    
Partial Class Apps_UC_TestCaseWithoutMaster
    Inherits System.Web.UI.Page
    <DirectMethod> _
    Function searchOtherOptions() As Boolean
        Return True
    End Function
End Class
    Regards,
    Alaswad
  4. #4
    Jan 12, 2016, 4:00 PM
    Hello!..

    First off, maybe you want to enforce a better default action (on enter) on your window. It is getting the 'cancel' button whenever someone hits 'enter' inside the FormPanel boundaries. Or rather, the window boundaries.

    You may want to add DefaultButton = "btnSelect" in the containers inside the problematic window.

    Second, it will require further investigation, but the key binding for the ENTER key is not preventing the default/submit action, unless the element you are hitting the "enter" key is a TextArea (<ext:TextArea />). I doubt you want a multi-line search box, so I've come up with this solution for now:

            Ext.define('Ext.container.Container', {
            override: 'Ext.container.Container',
            fireKey: function (e) {
                if (e.getKey() === e.ENTER &&
                    e.target.attributes['role'] &&
                    e.target.attributes['role'].value == 'textbox') {
                    e.target.contentEditable = true;
                }
                return this.callParent(arguments);
            }
        })
    This will ensure default button (be it cancel, be it select) is not triggered a 'click' event on 'enter', as long as you are hitting 'enter' inside a text field.

    For example, if you are on the grid selecting an item and then hit "enter", the default button's action will triggered (which currently will close the window).

    I hope this helps. And I will be opening an issue to track this problem, and better investigate it.
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  5. #5
    Jan 12, 2016, 4:17 PM
    Logged this issue as #1220! We hope to be able to make a definitive fix soon!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. [CLOSED] Close window issue since getting latest SVN
    By ATLAS in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Apr 01, 2014, 8:56 AM
  2. How to close Dynamic generated window on button click of that window..
    By Ganeshpatil in forum 1.x Help
    Replies: 0
    Last Post: Oct 24, 2012, 12:20 PM
  3. Issue Regarding to open a window in New Tab
    By Roshan in forum 1.x Help
    Replies: 0
    Last Post: Aug 06, 2012, 3:06 PM
  4. [CLOSED] Problem to close Window which has another Window inside
    By asztern in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Dec 21, 2010, 5:33 PM
  5. Update textfield in parent window and close child window
    By Kaido in forum 1.x Help
    Replies: 1
    Last Post: Apr 01, 2009, 12:24 PM

Posting Permissions