[CLOSED] TextField: Help with Remove SelectedText on Blur event

  1. #1

    [CLOSED] TextField: Help with Remove SelectedText on Blur event

    Hi,


    What I need to happen is that when the user has typed something on the TextField (TextField1) and highlighted the text, and then clicked (or tabbed) onto the GridPanel (GridPanel1), the highlight should disappear (this is to avoid confusion for the user).

    When I try Listener = Blur, the problem is that the selected control keeps going back to the TextField. What I am looking for is something like a "before Blur" event. Is there any possible solution for this?

    Thanks!


    <ext:TextField ID="TextField1" runat="server" FieldLabel="Label" Width="500">
      <Listeners>
        <Blur Handler="#{TextField1}.selectText(0,0);" />
      </Listeners>
    </ext:TextField>
    <ext:GridPanel ID="GridPanel1" runat="server">
      <Store>
        <ext:Store ID="Store1" runat="server" WarningOnDirty="false" >
          <Reader>
            <ext:ArrayReader>
              <Fields>
                <ext:RecordField Name="Column1" Type="String" />
                <ext:RecordField Name="Column2" Type="Int" />
              </Fields>
            </ext:ArrayReader>
          </Reader>
        </ext:Store>
      </Store>
      <ColumnModel ID="ColumnModel1" runat="server">
        <Columns>
          <ext:TemplateColumn DataIndex="Column1" Resizable="false" />
        </Columns>
      </ColumnModel>
      <SelectionModel>
        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="false" />
      </SelectionModel>                        
    </ext:GridPanel>
    Last edited by Daniil; Jan 31, 2012 at 7:26 AM. Reason: [CLOSED]
  2. #2
    Hi,

    It appears to be IE problem, I can't reproduce the issue with FireFox or Chrome.

    There is no BeforeBlur event and, I think, it would not be a solution, because the selectText method appears to return focus to a field.

    I can suggest the following solution.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test1", "test2", "test3" },
                    new object[] { "test4", "test5", "test6" },
                    new object[] { "test7", "test8", "test9" },
                };
                store.DataBind();
            }
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <script type="text/javascript">
            var onFocus = function (field, grid) {
                if (Ext.isIE) {
                    grid.getSelectionModel().on(
                        "selectionchange",
                        function () {
                            clearSelection(this);   
                        },
                        field,
                        {
                            single : true
                        });
                }
            };
    
            var clearSelection = function (field) {
                var d = field.el.dom;
                if (d.setSelectionRange) {
                    d.setSelectionRange(0, 0);
                } else if (d.createTextRange) {
                    var range = d.createTextRange();
                    range.moveStart('character', 0);
                    range.moveEnd('character', 0 - field.getRawValue().length);
                    range.select();
                }
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:TextField runat="server">
                <Listeners>
                    <Focus Handler="onFocus(this, GridPanel1);" />
                </Listeners>
            </ext:TextField>
            <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test1" />
                                    <ext:RecordField Name="test2" />
                                    <ext:RecordField Name="test3" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1" />
                        <ext:Column Header="Test2" DataIndex="test2" />
                        <ext:Column Header="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" />
                </SelectionModel> 
            </ext:GridPanel>
        </form>
    </body>
    </html>
  3. #3
    Hi Daniil,

    Thank you very much! It worked perfectly.
    Please close this ticket.

Similar Threads

  1. Replies: 4
    Last Post: Jul 01, 2012, 3:04 AM
  2. [CLOSED] TextField Blur event is throwing error in Editable Grid
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 05, 2012, 4:25 PM
  3. TextField DirectEvent Blur Error
    By David Pelaez in forum 1.x Help
    Replies: 5
    Last Post: Dec 21, 2010, 12:32 PM
  4. send extra parameters on blur event of textfield editor inside gridpanel
    By aditya.murthy88@gmail.com in forum 1.x Help
    Replies: 2
    Last Post: Dec 11, 2010, 12:04 PM
  5. [CLOSED] validate textfield on blur
    By idrissb in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 29, 2009, 3:47 PM

Posting Permissions