[CLOSED] TextField Blur event is throwing error in Editable Grid

  1. #1

    [CLOSED] TextField Blur event is throwing error in Editable Grid

    Hi,

    I need to validate input values in textfields at editable grid. I have to check Text1 value should always less than Text3 value, so I have implemented KeyUp listener for Text3 textfield. It is verifying once enter value at Text3 text field. At the same time, the Text3 textfield value should be less than Label value "12". I have an issue with keyUp like in Text1 textfield I have added 3 and trying to add 10 or 11 (which are less than 12) in Text3 textfield, but while enter 1 the Keyup event is firing and displaying the message "Test1 number should be less than Test3 number" and not allowing to enter either 10 or 11. So I would like to verify by adding Blur listener instead of KeyUp, then I am getting the error like "'e' is undefined". With KeyUp listener every thing is working if Text3 textfield value is less than 10. How to rectify this issue.

    
    <%@ 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)
            {
                cboValue.Items.Add(new Ext.Net.ListItem("val1", "1"));
                cboValue.Items.Add(new Ext.Net.ListItem("val2", "2"));
                cboValue.Items.Add(new Ext.Net.ListItem("val3", "3"));
                cboValue.Items.Add(new Ext.Net.ListItem("val4", "4"));
    
                LoadData();
            }
        }
        public void LoadData()
        {
            this.Store1.DataSource = GetDataInfo();
            this.Store1.DataBind();
        }
        public DataTable GetDataInfo()
        {
            DataTable dt = new DataTable();
            DataRow dr;
            dt.Columns.Add("TestID");
            dt.Columns.Add("test1");
            dt.Columns.Add("test2");
            dt.Columns.Add("test3");
    
            dr = dt.NewRow();
            dr[0] = "1";
            dr[1] = "";
            dr[2] = "2";
            dr[3] = "";
            dt.Rows.Add(dr);
    
            dr = dt.NewRow();
            dr[0] = "2";
            dr[1] = "";
            dr[2] = "test5";
            dr[3] = "";
            dt.Rows.Add(dr);
    
            return dt;
        }
    
    
        protected void Store_BeforeStoreChanged(object sender, BeforeStoreChangedEventArgs e)
        {
            string jsonData = e.DataHandler.JsonData;
            X.Msg.Alert("Saved", jsonData).Show();
            LoadData();
        }
    </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 id="Head1" runat="server">
        <title>Ext.Net Example</title>
        <script type="text/javascript">
            var mouseDownFlag = {};
    
            var rowUpdatedHandler = function (item, rowIndex, record) {
                if (!Ext.isEmpty(mouseDownFlag) && (mouseDownFlag.row === rowIndex)) {
                    this.editors[mouseDownFlag.row][mouseDownFlag.col].focus(false, 10);
                    mouseDownFlag = {};
                }
            }
            var editorRenderHandler = function (editor) {
                editor.el.on('mousedown', function (e) {
                    mouseDownFlag.row = editor.grid.row;
                    mouseDownFlag.col = editor.grid.col;
                });
            }
    
    //        var checkTextValue = function (fromVal, toVal) {
    
    //            alert(fromVal + "Next Field ID = " + toVal);
    
    //        }
    
            var checkPageFromNumbers = function (fromVal, toVal, ctrlId) {
    
                if (parseInt(fromVal, 10) > parseInt(Ext.getCmp('lblTotal').text, 10)) {
                    Ext.Msg.alert('Page Count', 'Page number should be less than page count');
                    Ext.getCmp(ctrlId).setValue('');
                }
            }
    
            var checkPageToNumbers = function (fromVal, toVal, ctrlId) {
    
                //alert(fromVal + "," +toVal);
                if (parseInt(toVal, 10) > parseInt(Ext.getCmp('lblTotal').text, 10)) {
                    Ext.Msg.alert('Page Count', 'Page number should be less than page count');
                    Ext.getCmp(ctrlId).setValue('');
                }
                else {
                    if (parseInt(fromVal, 10) > parseInt(toVal, 10)) {
                        Ext.Msg.alert('Page Count', 'Test1 number should be less than Test3 number');
                        //Ext.getCmp(ctrlId).setValue('');
                    }
    
                }
            }
    
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store ID="Store1" runat="server" RefreshAfterSaving="None" OnBeforeStoreChanged="Store_BeforeStoreChanged">
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="TestID" />
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1">
                        <Editor>
                            <ext:TextField ID="TextField1" runat="server" EnableKeyEvents="true">
                                <Listeners>
                                    <KeyUp Handler="var rowIndex = GridPanel1.getView().findRowIndex(e.getTarget());
                                        record = GridPanel1.getStore().getAt(rowIndex),
                                        value = record.data.test3;
                                        checkPageFromNumbers(this.getValue(),value, this.getItemId())" />
                                </Listeners>
                            </ext:TextField>
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Test2" DataIndex="test2">
                        <Editor>
                            <ext:ComboBox ID="cboValue" runat="server">
                                <Listeners>
                                    <Select Handler="this.triggerBlur(); this.blur();" Delay="250" />
                                </Listeners>
                            </ext:ComboBox>
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Test3" DataIndex="test3">
                        <Editor>
                            <ext:TextField ID="TextField3" runat="server" EnableKeyEvents="true">
                                <Listeners>
                                    <KeyUp Handler="var rowIndex = GridPanel1.getView().findRowIndex(e.getTarget());
                                        record = GridPanel1.getStore().getAt(rowIndex),
                                        value = record.data.test1;
                                        checkPageToNumbers(value,this.getValue(), this.getItemId())" />
                                    <%--<Blur Handler="var rowIndex = GridPanel1.getView().findRowIndex(e.getTarget());
                                        record = GridPanel1.getStore().getAt(rowIndex),
                                        value = record.data.test1;
                                        checkPageToNumbers(value,this.getValue(), this.getItemId())" />--%>
                                </Listeners>
                            </ext:TextField>
                        </Editor>
                    </ext:Column>
                    <ext:CommandColumn Width="40">
                        <Commands>
                            <ext:GridCommand Text="Reject" ToolTip-Text="Reject row changes" CommandName="taskreject"
                                Icon="ArrowUndo" />
                        </Commands>
                        <PrepareToolbar Handler="toolbar.items.get(0).setVisible(record.dirty);" />
                    </ext:CommandColumn>
                </Columns>
            </ColumnModel>
            <Listeners>
                <Command Handler="record.reject();" />
            </Listeners>
            <Plugins>
                <ext:EditableGrid ID="EditableGrid1" runat="server" />
            </Plugins>
            <View>
                <ext:GridView ID="GridView1" runat="server" ForceFit="true" />
            </View>
        </ext:GridPanel>
        <ext:Button ID="btnSaveChanges" runat="server" Text="Save">
            <Listeners>
                <Click Handler="GridPanel1.save();" Delay="100" />
            </Listeners>
        </ext:Button>
        <ext:Label ID="lblTotal" runat="server" Text="12"></ext:Label>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jan 10, 2012 at 7:38 PM. Reason: [CLOSED]
  2. #2
    Hi,

    A TextField's Blur listener have no "e" argument.

    Please replace
    e.getTarget()
    with
    Ext.EventObject.getTarget()
    and things should go well.

    See also
    http://docs.sencha.com/ext-js/3-4/#!/api/Ext.form.Field-event-blur
    http://docs.sencha.com/ext-js/3-4/#!/api/Ext.EventObject
  3. #3
    Hi Daniil,

    Thank you. It is working. Is there any way to focus again to that field after showing the message? I have added as following...The ctrlId is the TextField in the editable grid, but Ext.getCmp(ctrlId).focus() is not working where as Ext.getCmp(ctrlId).setValue('') is working.

    
    var checkPageToNumbers = function (fromVal, toVal, ctrlId) {
    
                //alert(fromVal + "," +toVal);
                if (parseInt(toVal, 10) > parseInt(Ext.getCmp('lblTotal').text, 10)) {
                    Ext.Msg.alert('Page Count', 'Page number should be less than page count');
                    Ext.getCmp(ctrlId).setValue('');
                }
                else {
                    if (parseInt(fromVal, 10) > parseInt(toVal, 10)) {
                        Ext.Msg.alert('Page Count', 'Test1 number should be less than Test3 number');
                        Ext.getCmp(ctrlId).setValue('');
                        Ext.getCmp(ctrlId).focus();
                    }
    
                }
            }
    Quote Originally Posted by Daniil View Post
    Hi,

    A TextField's Blur listener have no "e" argument.

    Please replace
    e.getTarget()
    with
    Ext.EventObject.getTarget()
    and things should go well.

    See also
    http://docs.sencha.com/ext-js/3-4/#!/api/Ext.form.Field-event-blur
    http://docs.sencha.com/ext-js/3-4/#!/api/Ext.EventObject
  4. #4
    Please try:
    Ext.Msg.alert('title', 'message', function () {
        Ext.getCmp(ctrlId).focus(10);
    });
  5. #5
    Hi Daniil,

    No, it is not working, where as it is throwing error while enter less number than Text1 textfield number.
    Quote Originally Posted by Daniil View Post
    Please try:
    Ext.Msg.alert('title', 'message', function () {
        Ext.getCmp(ctrlId).focus(10);
    });
  6. #6
    Please demonstrate the whole code how you are trying and more details about the error.

Similar Threads

  1. [CLOSED] TextField: Help with Remove SelectedText on Blur event
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 31, 2012, 1:12 AM
  2. Replies: 4
    Last Post: Aug 17, 2011, 2:38 PM
  3. Replies: 1
    Last Post: Aug 17, 2011, 1:35 PM
  4. TextField DirectEvent Blur Error
    By David Pelaez in forum 1.x Help
    Replies: 5
    Last Post: Dec 21, 2010, 12:32 PM
  5. 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

Tags for this Thread

Posting Permissions