[CLOSED] Textfield Change Event in Grid Panel

[canusr1]

Hello there,

I have 2 Textfields (so called Amount & Rate) in GridPanel.

When I make the changes in "Rate" textfield, I would like to calculate Amount based on updated "Rate".

I use Change OnEvent to fire the calculate function. But this function fire, whatever I make changes in text field.

I would like to fire the event only after key in completely in the textfield. Is there any other event can I use for that situation?

Thanks for the help in advance.

<ext:Column ID="RATE_adj" runat="server" Text="Rate Adj" DataIndex="RATE_adj" Width="80">
                                                            <Editor>
                                                                <ext:TextField ID="txtRATE_adj" runat="server" Regex="/(^-?\d\d*[\.,]\d*$)|(^-?\d\d*$)|(^-?[\.,]\d\d*$)/" SelectOnFocus="true">
                                                                    <DirectEvents>
                                                                        <Change OnEvent="txtRATE_adjChanged">
                                                                            <ExtraParams>
                                                                                <ext:Parameter Name="DEFINITION_GRP_ID" Value="#{txtRATE_adj}.getValue()" Mode="Raw" Encode="true"></ext:Parameter>
                                                                            </ExtraParams>
                                                                        </Change>
                                                                        
                                                                    </DirectEvents>
                                                                </ext:TextField>
                                                            </Editor>
                                                            <Renderer Fn="colorRenderer" />
                                                            <%--<Renderer Fn="Ext.util.Format.numberRenderer('0,0.00')" />--%>
                                                        </ext:Column>

[Daniil]

Hi @canusr1,

Please clarify the following. I mean what exactly the moment it happens.

I would like to fire the event only after key in completely in the textfield.

However, I guess you need to use a CellEditing's Edit event.
http://docs.sencha.com/extjs/4.2.1/#...ing-event-edit

[canusr1]

Currently, whenever i make the changes in txtRATE_adj, fire "txtRATE_adjChanged" event repeatedly.

Let say I wanna key in "2.5" in "txtRATE_adj" textfield.

First I type "2", then fire "txtRATE_adjChanged" as first time.

Then I continue to type "2.", then fire the event again as second time.

Then I continue typing "2.5", then fire the event again.

I wanna fire the event only one time after I've completely type the value in textfiled?

Or do you have a grid panel sample for the following scenario.

I have Column A, Column B and Column C in gridpanel.

When I change in Column A, Column C have to fill with the value of Column A * Column B.

Is there any other way to do that? Hope you get what I mean.

Thanks.

Hi @canusr1,

Please clarify the following. I mean what exactly the moment it happens.



However, I guess you need to use a CellEditing's Edit event.
http://docs.sencha.com/extjs/4.2.1/#...ing-event-edit

[Daniil]

I wanna fire the event only one time after I've completely type the value in textfiled?

There are three options I can see that you can try.

1. Exclude the keyup event from the checkChangeEvents.
http://docs.sencha.com/extjs/4.2.1/#...ckChangeEvents

2. Use the Blur event instead of the Change one.

3. Increase the checkChangeBuffer option.
http://docs.sencha.com/extjs/4.2.1/#...ckChangeBuffer

When I change in Column A, Column C have to fill with the value of Column A * Column B.

A ComponentColumn looks good for this requirement.

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[] { 1, 1 },
                new object[] { 2, 2 },
                new object[] { 3, 3 }
            };
        }
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="a" />
                                <ext:ModelField Name="b" />
                                <ext:ModelField Name="c">
                                    <Convert Handler="return record.data.a * record.data.b;" />
                                </ext:ModelField>
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:ComponentColumn runat="server" Text="A" DataIndex="a" Editor="true" SilentSave="false">
                        <Component>
                            <ext:NumberField runat="server" />
                        </Component>
                        <Listeners>
                            <Edit Handler="e.record.data.c = e.value * e.record.data.b;" />
                        </Listeners>
                    </ext:ComponentColumn>
                    <ext:ComponentColumn runat="server" Text="B" DataIndex="b" Editor="true" SilentSave="false">
                        <Component>
                            <ext:NumberField runat="server" />
                        </Component>
                        <Listeners>
                            <Edit Handler="e.record.data.c = e.record.data.a * e.value;" />
                        </Listeners>
                    </ext:ComponentColumn>
                    <ext:ComponentColumn runat="server" Text="C" DataIndex="c" Editor="true">
                        <Component>
                            <ext:NumberField runat="server" />
                        </Component>
                    </ext:ComponentColumn>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </form>
</body>
</html>